如何检测鼠标指针是否碰到了已经在HTML 5画布上绘制的线条 [英] How to detect if a mouse pointer hits a line already drawn on an HTML 5 canvas

问题描述

我试图弄清楚如何用jQuery检测用户的鼠标是否碰到HTML 5画布上的一行。

I am trying to figure out how one can detect if the user's mouse hits a line on an HTML 5 canvas with jQuery.

以下是生成画布行的代码：

Here is the code that generates the canvas lines:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(40,0);
        ctx.lineTo(40,360);
        ctx.stroke();
        ctx.moveTo(80,400);
        ctx.lineTo(80,40);
        ctx.stroke();
        ctx.moveTo(120,0);
        ctx.lineTo(120,360);
        ctx.stroke();
        ctx.moveTo(160,400);
        ctx.lineTo(160,40);
        ctx.stroke();
    };
</script>

我使用的是经过修改的jQuery脚本，实际上我在这里找到了另一个问题，但是现在无法确定如何检测画布中的线条，主要是白色到黑色的颜色差异。我知道可以用图像完成此操作，但是我还没有见过像这样的人。

I'm using a modified jQuery script that I actually found in another question on here, but now I can't figure out how to detect the line, mainly the difference in color from white to black, in the canvas. I know that this can be done with images, but I haven't seen anyone with something like this.

我想我的真正问题是，有没有办法检测到

I guess my real question is, is there a way to detect color changes on a canvas element with jQuery?

推荐答案

可以使用javascript改变画布元素上的颜色吗？实际上，在上面的示例中您没有使用任何jQuery。一种简单的方法是从画布中获取像素数据，并检查指定x和y位置的alpha。如果Alpha值未设为0，则您在画布上绘制了一些东西。下面是我将真正的快速操作组合在一起的功能。

Its possible to do with javascript. In fact you aren't using any jQuery in your example above. An easy way to do it is by grabbing the pixel data from the canvas, and checking the alpha at the specified x and y position. If the alpha isn't set to 0, then you have something drawn on the canvas. Below is a function I put together real quick that does that.

实时演示

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 400;
height = 400;

canvas.width = canvas.height = 200;

// draw
ctx.moveTo(40, 0);
ctx.lineTo(40, 360);
ctx.stroke();
ctx.moveTo(80, 400);
ctx.lineTo(80, 40);
ctx.stroke();
ctx.moveTo(120, 0);
ctx.lineTo(120, 360);
ctx.stroke();
ctx.moveTo(160, 400);
ctx.lineTo(160, 40);
ctx.stroke();

function detectLine(x, y) {
    var imageData = ctx.getImageData(0, 0, width, height),
        inputData = imageData.data,
        pData = (~~x + (~~y * width)) * 4;

    if (inputData[pData + 3]) {
        return true;
    }

    return false;
}

canvas.addEventListener("mousemove", function(e){
    var x  = e.pageX,
        y = e.pageY;
    console.log(detectLine(x, y));
});

console.log(detectLine(40, 100));
console.log(detectLine(200, 200));

这篇关于如何检测鼠标指针是否碰到了已经在HTML 5画布上绘制的线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！