单击按钮后如何禁用拖动 function

Question

单击按钮后如何使角停止拖动？

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

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

Answer 1

你可以定义一个变量enableDrag并且当你的mousedown事件被调用时，你可以给它分配一个 and 条件：

 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, enableDrag = true; function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } function point(x, y) { return { x: x, y: y }; } 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 && enableDrag; 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): 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. 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; } } 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); } } } function disableDrag() { enableDrag = false; } init(); draw();

 body { background-color: #a3d5d3; } #canvas { top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #button { top: 0; left: 0; display: block; }

 <button id="button" onclick="disableDrag();">disable</button> <canvas id="canvas" width="500" height="500"></canvas>