有没有办法用jQuery检测画布线？ [英] Is there a way to detect canvas lines with jQuery?

问题描述

我想弄清楚如何检测用户的鼠标是否在HTML 5画布上用jQuery命中一行。

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.

我想我的真正的问题是，有一种方法来检测使用jQuery可以在canvas元素上改变颜色？

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

推荐答案

实际上你没有在上面的例子中使用任何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));

这篇关于有没有办法用jQuery检测画布线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！