Question

我在Canvas上有一堆SVG路径形状。

但最初我改变了画布的坐标系，因此它只适合单位圆，并且y向上增加。所以例如（.9，.9）将位于画布的右上角：

$(document).ready(function() {  
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    window.requestAnimationFrame(vsync);

    function vsync() {
        var canvas = document.getElementById("myCanvas");
        var W = window.innerWidth;
        var H = window.innerHeight;
        canvas.width  = W;
        canvas.height = H;

        var ctx = canvas.getContext("2d");

        // (0,0) at center of canvas
        // y increases up
        // unit circle fits on canvas with margin 0.1
        ctx.translate(W/2, H/2);

        var scale = Math.min(W/2,H/2) / 1.1;
        ctx.scale(scale,-scale);

我希望点击测试鼠标点击以检查它们是否正在击中我的路径对象。

我可能会做自己的数学而不是使用isPointInPath。但无论我采用哪种方式，我都需要在变换后的坐标系中使用鼠标xy。

当然，复制鼠标点的变换只需几行。但这是糟糕的编码风格。它创造了未来分歧的机会。如果我想改变变换，我需要在两个不同的地方进行 - 这与可维护性相差一步。

有没有办法干净利落地做到这一点？

编辑：
Get transformed coordinates with canvas
How do I get the coordinates of a mouse click on a canvas element?

Answer 1

您想要做的是两件不同的事情，因此必须在两个不同的地方进行更改。改变画布的协调系统正在从你的视角转变为画布协调。而将鼠标协调转换为视图协调是一种相反的操作。

因此，您无法为两者创造相同的功能。

这样做的好方法是定义两个函数，如：

convertCoordinationsFromFooToBar(x, y)

和

convertCoordinationsFromBarToFoo(x, y).

但请注意，这样你就不能使用canvas translate和scale进行变换，你应该在传递给canvas绘图函数的每个坐标上显式调用transform函数。

将mouseclick x，y转换为已转换的Canvas空间

1 个答案: