Javascript 调整HTML5画布的矩形大小

我有一些函数可以在画布元素上绘制矩形。绘制元素时，我希望能够通过拖动其角来调整其大小

var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
rect={}，
阻力=假；
函数init（）{
canvas.addEventListener（'mousedown'，mousedown，false）；
canvas.addEventListener（'mouseup'，mouseup，false）；
canvas.addEventListener（'mousemove'，mousemove，false）；
}
功能鼠标向下（e）{
rect.startX=e.pageX-this.offsetLeft；
rect.startY=e.pageY-this.offsetTop；
阻力=真；
}
函数mouseUp（）{
阻力=假；
}
函数mouseMove（e）{
如果（拖动）{
rect.w=（e.pageX-this.offsetLeft）-rect.startX；
rect.h=（e.pageY-this.offsetTop）-rect.startY；
clearRect（0，0，canvas.width，canvas.height）；
draw（）；
}
}
函数绘图（）{
ctx.fillRect（rect.startX、rect.startY、rect.w、rect.h）；
}
init（）
确保使用某种阈值来检查角点上的拖动，使用足够接近的
变量来保持此阈值，然后通过查看角点和鼠标点之间的差值的绝对值是否小于阈值来检查角点。除此之外，还有很多案件需要审理

var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
rect={}，
drag=false，
慕斯，
老鼠，
足够近=10，
dragTL=dragBL=dragTR=dragBR=false；
函数init（）{
canvas.addEventListener（'mousedown'，mousedown，false）；
canvas.addEventListener（'mouseup'，mouseup，false）；
canvas.addEventListener（'mousemove'，mousemove，false）；
}
功能鼠标向下（e）{
mouseX=e.pageX-this.offsetLeft；
mouseY=e.pageY-this.offsetTop；
//如果还没有直肠的话
if（rect.w==未定义）{
rect.startX=mouseY；
rect.startY=mouseX；
dragBR=true；
}
//如果有，检查哪个角落
//（如果有）已单击
//
//4例：
//1.左上角
else if（checkcloseverough（mouseX，rect.startX）和&checkcloseverough（mouseY，rect.startY））{
dragTL=真；
}
//2.右上角
else if（checkcloseough（mouseX，rect.startX+rect.w）和&checkcloseough（mouseY，rect.startY））{
dragTR=真；
}
//3.左下角
else if（checkcloseverough（mouseX，rect.startX）和&checkcloseverough（mouseY，rect.startY+rect.h））{
dragBL=true；
}
//4.右下角
else if（checkcloseverough（mouseX，rect.startX+rect.w）和&checkcloseverough（mouseY，rect.startY+rect.h））{
dragBR=true；
}
//（5）没有
否则{
//不调整大小的句柄
}
clearRect（0,0，canvas.width，canvas.height）；
draw（）；
}
功能检查是否足够紧密（p1、p2）{
return Math.abs（p1-p2）做一个手柄系统：当鼠标移动时，获取到每个角的距离，以获得靠近光标的第一个角，然后保存它并根据它调整矩形的大小

下面是一个JSFIDLE示例：

函数getHandle（鼠标）{
如果（dist（mouse，point（rect.x，rect.y））我编辑了我的答案以使其更为完整，你能解释一下你的意思吗？它对我来说工作得很好。我更新了小提琴，使其更清楚地显示正在发生的事情。做得很好，我喜欢手柄，以便用户知道如何使用它。
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();

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