调整矩形HTML5画布的大小

Question

我有一些函数在canvas元素上绘制矩形。绘制元素时，我希望能够通过拖动它的角来调整它的大小。

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  rect = {},
  drag = false;

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

function mouseDown(e) {
  rect.startX = e.pageX - this.offsetLeft;
  rect.startY = e.pageY - this.offsetTop;
  drag = true;
}

function mouseUp() {
  drag = false;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw();
  }
}

function draw() {
  ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}

init();

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

Answer 1

确保使用某种阈值来检查角落的拖动，使用closeEnough变量来保持此阈值，然后通过查看角点和鼠标点之间的差值的绝对值是否小于阈值来检查角点。除此之外，还有很多案例要经历。 Here is a jsFiddle of it

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false,
    mouseX, 
    mouseY,
    closeEnough = 10,
    dragTL=dragBL=dragTR=dragBR=false;

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

function mouseDown(e) {
  mouseX = e.pageX - this.offsetLeft;
  mouseY = e.pageY - this.offsetTop;

  // if there isn't a rect yet
  if(rect.w === undefined){
    rect.startX = mouseY;
    rect.startY = mouseX;
    dragBR = true;
  }

  // if there is, check which corner
  //   (if any) was clicked
  //
  // 4 cases:
  // 1. top left
  else if( checkCloseEnough(mouseX, rect.startX) && checkCloseEnough(mouseY, rect.startY) ){
    dragTL = true;
  }
  // 2. top right
  else if( checkCloseEnough(mouseX, rect.startX+rect.w) && checkCloseEnough(mouseY, rect.startY) ){
    dragTR = true;

  }
  // 3. bottom left
  else if( checkCloseEnough(mouseX, rect.startX) && checkCloseEnough(mouseY, rect.startY+rect.h) ){
    dragBL = true;

  }
  // 4. bottom right
  else if( checkCloseEnough(mouseX, rect.startX+rect.w) && checkCloseEnough(mouseY, rect.startY+rect.h) ){
    dragBR = true;

  }
  // (5.) none of them
  else {
    // handle not resizing
  }

  ctx.clearRect(0,0,canvas.width,canvas.height);
  draw();

}

function checkCloseEnough(p1, p2){
  return Math.abs(p1-p2)<closeEnough;
}
function mouseUp() {
  dragTL = dragTR = dragBL = dragBR = false;
}

function mouseMove(e) {
  mouseX = e.pageX - this.offsetLeft;
  mouseY = e.pageY - this.offsetTop;
  if(dragTL){
    rect.w += rect.startX-mouseX;
    rect.h += rect.startY-mouseY;
    rect.startX = mouseX;
    rect.startY = mouseY;
  } else if(dragTR) {
    rect.w = Math.abs(rect.startX-mouseX);
    rect.h += rect.startY-mouseY;
    rect.startY = mouseY;
  } else if(dragBL) {
    rect.w += rect.startX-mouseX;
    rect.h = Math.abs(rect.startY-mouseY);
    rect.startX = mouseX;  
  } else if(dragBR) {
    rect.w = Math.abs(rect.startX-mouseX);
    rect.h = Math.abs(rect.startY-mouseY);
  }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    draw();
}

function draw() {
  ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}

init();

Answer 2

做一个句柄系统：当鼠标移动时，获取到每个角落的距离以获得靠近光标的第一个然后保存并根据它调整矩形的大小。

这是一个JSfiddle说明它：http://jsfiddle.net/BaliBalo/9HXMG/

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;
}