ES5 Canvas mousedown 拖动问题

Question

我正在尝试使用 mousedown 来检测您何时按住某个项目。对于上下文，我在一个数组中有 2 个精灵，我可以检测到它们边界框中的点击，并且它正确地传递到 mousedownHandler。

spArray[1] 是我要拖动的 canvas 精灵。 clickedBoundingBox 工作正常。

function canvasMouseDownHandler(ev,ctx,spArray){

   if (spArray[1].clickedBoundingBox(ev)){
       console.log("Mousedown successful");

       var mx = ev.offsetX; 
       var my = ev.offsetY;

       spArray[1].x = Math.round(mx-spArray[1].width/2);
       spArray[1].y = Math.round(my-spArray[1].height/2);

}

目前发生的情况是它会立即捕捉到鼠标位置，并且不会保持拖动。通过控制台日志，我希望看到重复记录 "mousedown successful"

我正在考虑使用 setInterval 函数将精灵捕捉到鼠标位置，但后来我运行遇到了清除 mouseup 间隔的问题。我对事件相当陌生，我很难理解这一点。

非常感谢任何帮助。

Answer 1

如果我理解正确的话，您希望 MouseDownHandler 在鼠标移动时被触发，我不知道有任何语言会那样做...

每次按下鼠标按钮时，MouseDown 应该是一次性事件
就像松开鼠标按钮时发生一次 MouseUp 一样。
应该有一个更频繁触发的 MouseMove。

有了这些信息，您就可以开始拖着工作了。
拖动是在 MouseDown 和 MouseUp 之间发生的每一个动作

ES5 Canvas mousedown 拖动问题

ES5 Canvas mousedown dragging issue

canvas

drag-and-drop

drag

ecmascript-5

mousedown