javascript - 有没有一种方法可以单击 Canvas 中的特定点/元素(使用 javascript、jquery 或 selenium)

Question

如何在 Canvas 的特定位置应用点击？ (使用坐标对我来说似乎是最合乎逻辑的，但找不到任何方法，欢迎任何其他想法)。请注意，我无权访问创建 Canvas 的代码。

编辑:一些澄清， Canvas 有多个正在绘制的元素，我无法使用 jquery 选择但需要单击它们。我可以手动找到它们的坐标并进行一些计算，但每次我尝试将单击或鼠标事件传递到该位置时都不会被视为真正的鼠标单击(应该单击的按钮不是)。

Answer 1

试试怎么样

canvas.on('click', function(e) {

    // calculate x y coordinates on canvas
    var x = e.pageX - $(this).offset().left,
    y = e.pageY - $(this).offset().top;

    // implement collision detection via the coordinates the element you want to click (assuming you know where it is)
    if (y > <elementY> && y < <elementY> + <elementHeight>
        && x > <elementX> && x < <elementX> + <elementWidth>) {
        alert('found it');
    }
});

我没有时间测试那个片段。如果您知道 Canvas 中元素的 x 和 y 坐标，该代码可能就可以解决问题。

我尝试用该片段做的是通过 elmentY 和 elementY + elementHeight 以及 elementX 和 元素X + 元素宽度。如果您知道所有这些值，您可以简单地检查您的点击事件的 x 和 y 值是否落在上述框中。

编辑

如果要在某个位置触发点击事件，需要预先定义clickEvent，并设置pageX和pageY属性。

var e = new jQuery.Event("click");
e.pageX = 10;
e.pageY = 10;
$(<canvas>).trigger(e);

您可能还必须在计算中包括 Canvas 的偏移量。