如何在 canvas 内拖动绘制的圆圈？

Question

我正在编写一个作业，我必须将在 canvas 内绘制的圆圈拖到奶酪图像上方，并将另一个鼠标图像更改为正在庆祝的小鼠。我尝试添加一个 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() 绘制所有必要的元素。

Answer 1

很高兴你觉得它有用。

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

是的，利用矩阵。如果你看得够仔细的话，这并不难，而且很有意义:)

从正方形开始，因为其他形状需要一些额外的数学运算才能完美。虽然额外的数学意味着更少的表现。因此很多游戏开发者使用 square/cubed 边界 boxes/hitboxes 进行碰撞检测。

哦还有一个小提示：远离小数，因为浮点数更昂贵。但是 JS rounding/Math 方法可能更糟，因此位操作在这里（以及其他地方）效果很好

四舍五入：

// 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

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

如何在 canvas 内拖动绘制的圆圈？

How can I drag a drawn circle within a canvas?

javascript

canvas

drag

dom-events