如何在画布内拖动绘制的圆圈？答案

【问题标题】：How can I drag a drawn circle within a canvas?如何在画布内拖动绘制的圆圈？
【发布时间】：2021-12-16 17:30:03
【问题描述】：

我正在编写一个作业，我必须将画布内的一个圆圈拖到奶酪图像上，然后将另一个鼠标图像更改为正在庆祝的老鼠。我尝试添加一个mousemove 事件侦听器来检测圆上的鼠标指针，并添加一个if 语句来查看鼠标指针的X/Y 值是否大于X/Y 值。我想使用requestAnimationFrame 来执行此操作。

        canvas.addEventListener("mousemove", setMousePosition, false);
        function setMousePosition(e) 
        {
            mouseX = e.clientX - canvasPos.x;
            mouseY = e.clientY - canvasPos.y;
        }
        function update() 
        {
            context.clearRect(0,0,canvas.width, canvas.height);
            drawText();
            loadCheese();
            loadMouse();
            drawLine();
            context.beginPath();
            var x = context.arc(mouseX,mouseY,40,0,2*Math.PI, true);
            context.fillStyle = "#FF6A6A";
            context.fill();
            context.stroke();

            requestAnimationFrame(update);

        }

这是我的基本代码，它基本上使圆圈跟随我的光标。事件处理程序更正相对于我的浏览器的鼠标坐标。 update() 绘制所有必要的元素。

【问题讨论】：

现在您需要一个事件处理程序。这里有很好的答案stackoverflow.com/questions/28284754/…
谢谢。它确实有一些很好的答案，但我如何让它检测圆圈是否在图像、空间等上方？在我拖拽的时候会不会只是一些if currentXpos <>= x？

标签： javascript canvas dom-events drag

【解决方案1】：

很高兴你发现它很有用。

这有点太长了，无法评论所以..

是的，利用矩阵。如果你看得足够近，这并不难，也很有意义:)

从正方形开始，因为如果您希望它完美，其他形状需要一些额外的数学运算。虽然额外的数学意味着更少的性能。因此许多游戏开发者使用方形/立方体边界框/碰撞框进行碰撞检测。

哦，还有一个小提示：不要使用小数，因为浮点更昂贵。但是 JS 舍入/数学方法可能更糟，所以位操作在这里（以及其他地方）效果很好

这里有一些四舍五入的东西：

// some quicker math
export const bitshift = {

   // this is for decimals only
   round_d: d => (d + (d > 0 ? 0.5 : -0.5)) << 0,

   // and with a multiple we round by the number we pass
   // to the second argument
   /** d: domain, m: multiple */
   round_m: (d, m = 1) => ((d / m + (d > 0 ? 0.5 : -0.5)) << 0) * m
}

如果您不熟悉，基本上位移就是将 1 和 0 在一个字节中朝一个或另一个方向移动。通过左移，你得到乘以 2 并在右移时除以 2，例如：

0010 is 2
0100 is 4
0001 is 1

正如您可以想象的那样，进行实际数学运算需要更多的步骤，即使由于计算机的工作方式，位操作有时可能不太准确。很值得知道。

至于碰撞检测，这里有一个简单的方块：

if (
   rx < x  + w && 
   rx + rw > x && 
   ry < y  + h && 
   rh + ry > y
)
   collided!

还有一些重读：http://www.jeffreythompson.org/collision-detection/matrix-transformations.php

祝你好运，玩得开心！ =)

【讨论】：