javascript - 如何逐渐拖入正方形

Question

目前我的代码只能拖入矩形或正方形，但我如何逐渐将 Angular 拖入正方形？

这是我的代码链接:https://codepen.io/firassyazwani/pen/NWWKMGK

  case 'topleft':
    rect.w += rect.x - mousePos.x;
    rect.h += rect.y - mousePos.y;
    rect.x = mousePos.x;
    rect.y = mousePos.y;
    break;
  case 'topright':
    rect.w = mousePos.x - rect.x;
    rect.h += rect.y - mousePos.y;
    rect.y = mousePos.y;
    break;
  case 'bottomleft':
    rect.w += rect.x - mousePos.x;
    rect.x = mousePos.x;
    rect.h = mousePos.y - rect.y;
    break;
  case 'bottomright':
    rect.w = mousePos.x - rect.x;
    rect.h = mousePos.y - rect.y;
    break;

  case 'top':
    rect.h += rect.y - mousePos.y;
    rect.y = mousePos.y;
    break;

  case 'left':
    rect.w += rect.x - mousePos.x;
    rect.x = mousePos.x;
    break;

  case 'bottom':
    rect.h = mousePos.y - rect.y;
    break;

  case 'right':
    rect.w = mousePos.x - rect.x;
    break;
}

Answer 1

您可以使用 isSquare bool 值通过修改 point() 和 mousemove 事件的开关大小写来使高度和宽度均匀变化:

var isSquare = true;
...
function point(x, y, isSquare) {
  return !isSquare ? {
    x: x,
    y: y
  } : {
    x: x,
    y: x
  };
}
...
      case 'topright':
        rect.w = mousePos.x - rect.x;
        if (!isSquare) {
          rect.y = mousePos.y;
          rect.h += rect.y - mousePos.y;
        } else {
          rect.h = mousePos.x - rect.x;
          rect.y = rect.x;
        }
        break;
...
      case 'bottomleft':
        rect.w += rect.x - mousePos.x;
        rect.x = mousePos.x;
        if (!isSquare) {
          rect.h = mousePos.y - rect.y;
        } else {
          rect.h = rect.w;
          rect.y = rect.x;
        }

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  rect = {
    x: 50,
    y: 50,
    w: 50,
    h: 50
  },
  handlesSize = 8,
  currentHandle = false,
  drag = false,
  prevW = rect.w,
  prevH = rect.h,
  isSquare = true;

function init() {
  canvas.addEventListener('mousedown', mouseDown, false);
  canvas.addEventListener('mouseup', mouseUp, false);
  canvas.addEventListener('mousemove', mouseMove, false);
}

function point(x, y, isSquare) {
  return !isSquare ? {
    x: x,
    y: y
  } : {
    x: x,
    y: x
  };
}

function dist(p1, p2) {
  return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
}

function getHandle(mouse) {
  if (dist(mouse, point(rect.x, rect.y)) <= handlesSize)
    return 'topleft';
  if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize)
    return 'topright';
  if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize)
    return 'bottomleft';
  if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize)
    return 'bottomright';
  if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize)
    return 'top';
  if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize)
    return 'left';
  if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize)
    return 'bottom';
  if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize)
    return 'right';
  return false;
}

function mouseDown(e) {
  if (currentHandle)
    drag = true;
  draw();
}

function mouseUp() {
  drag = false;
  currentHandle = false;
  prevW = rect.w;
  prevH = rect.h;
  draw();
}

function mouseMove(e) {
  var previousHandle = currentHandle;
  if (!drag)
    currentHandle = getHandle(point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop));
  if (currentHandle && drag) {
    var mousePos = point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    switch (currentHandle) {
      case 'topleft':
        rect.w += rect.x - mousePos.x;
        rect.h += rect.y - mousePos.y;
        rect.x = mousePos.x;
        rect.y = mousePos.y;
        break;
      case 'topright':
        rect.w = mousePos.x - rect.x;
        if (!isSquare) {
          rect.y = mousePos.y;
          rect.h += rect.y - mousePos.y;
        } else {
          rect.h = mousePos.x - rect.x;
          rect.y = rect.x;
        }
        break;
      case 'bottomleft':
        rect.w += rect.x - mousePos.x;
        rect.x = mousePos.x;
        if (!isSquare) {
          rect.h = mousePos.y - rect.y;
        } else {
          rect.h = rect.w;
          rect.y = rect.x;
        }
        break;
      case 'bottomright':
        rect.w = mousePos.x - rect.x;
        rect.h = mousePos.y - rect.y;
        break;

      case 'top':
        rect.h += rect.y - mousePos.y;
        rect.y = mousePos.y;
        break;

      case 'left':
        rect.w += rect.x - mousePos.x;
        rect.x = mousePos.x;
        break;

      case 'bottom':
        rect.h = mousePos.y - rect.y;
        break;

      case 'right':
        rect.w = mousePos.x - rect.x;
        break;
    }
    //console.log(mousePos, rect, currentHandle);
  }
  if (drag || currentHandle != previousHandle)
    draw();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FFFF33';
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
  if (currentHandle) {
    var posHandle = point(0, 0);
    switch (currentHandle) {
      case 'topleft':
        posHandle.x = rect.x;
        posHandle.y = rect.y;
        break;
      case 'topright':
        posHandle.x = rect.x + rect.w;
        posHandle.y = rect.y;
        break;
      case 'bottomleft':
        posHandle.x = rect.x;
        posHandle.y = rect.y + rect.h;
        break;
      case 'bottomright':
        posHandle.x = rect.x + rect.w;
        posHandle.y = rect.y + rect.h;
        break;
      case 'top':
        posHandle.x = rect.x + rect.w / 2;
        posHandle.y = rect.y;
        break;
      case 'left':
        posHandle.x = rect.x;
        posHandle.y = rect.y + rect.h / 2;
        break;
      case 'bottom':
        posHandle.x = rect.x + rect.w / 2;
        posHandle.y = rect.y + rect.h;
        break;
      case 'right':
        posHandle.x = rect.x + rect.w;
        posHandle.y = rect.y + rect.h / 2;
        break;
    }
    ctx.globalCompositeOperation = 'xor';
    ctx.beginPath();
    ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
    ctx.fill();
    ctx.globalCompositeOperation = 'source-over';
  }
  if (drag) {
    if (rect.w != prevW) {
      ctx.fillText(rect.w,
        rect.x + rect.w / 2 - 5,
        rect.y - 10);
    }
    if (rect.h != prevH) {
      ctx.fillText(rect.h,
        rect.x + rect.w + 10,
        rect.y + rect.h / 2 + 5);
    }
  }
}

init();
draw();

body {
  background-color: #a3d5d3;
}

#canvas {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<canvas id="canvas" width="500" height="500"></canvas>