Html 鼠标是否位于画布上的用户绘制区域

基本上，用户上传一张图片，然后可以在上面画画，并保存结果。然后，另一个用户可以查看照片，如果他们在绘制的同一区域单击，就会发生一些事情。 因此，用户1可以通过在照片上绘图，使用户2可以单击某个区域

现在上传的部分很好，在a的帮助下画画，我已经厌倦了。但是定义什么区域是可点击的有点困难。对于像长方形这样的东西，这很容易，我做了一个简单的选择

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var按钮=新对象（）；
按钮x=50；
按钮y=50；
按钮宽度=50；
按钮高度=50；
button.rgb=“rgb（0,0,255）”；
功能drawbutton（buttonobject）
{
context.fillStyle=buttonobject.rgb；
context.fillRect（buttonobject.x，buttonobject.y，buttonobject.width，buttonobject.height）；
strokeRect（buttonobject.x，buttonobject.y，buttonobject.width，buttonobject.height）；
}
绘图按钮（按钮）；
功能检查取消设置坐标（按钮、鼠标、鼠标）
{
如果（（鼠标>按钮x）和（（鼠标<（按钮x+按钮宽度））&（（鼠标>按钮y）和（（鼠标<（按钮y+按钮高度）））
返回true；
其他的
返回false；
}
$（“#myCanvas”）。单击（函数（eventObject）{
mouseX=eventObject.pageX-this.offsetLeft；
mouseY=eventObject.pageY-this.offsetTop；
if（检查去毛刺坐标（按钮、鼠标、鼠标））
{
button.rgb=“rgb（0，255，0）”；
绘图按钮（按钮）；
}否则{
button.rgb=“rgb（255,0,0）”；
绘图按钮（按钮）；
}
});

但是，当涉及到其他形状，如圆，或只是有人窒息的网页，你会如何着手检测呢

我的一个想法是使用经过编辑的图层，将其隐藏，并检测像素颜色（比如蓝色），但这限制了照片的颜色使用，我不完全确定如何实现它。还有其他想法吗

编辑：

我用毕达哥拉斯定理计算出了圆，看看鼠标坐标是否小于半径，但假设圆心为0,0，然后用实际圆心偏移鼠标

功能检查取消设置坐标（按钮、鼠标、鼠标）{
实际值lx=鼠标x-按钮nobj.x
实际=鼠标键-buttonObj.y
鼠标QX=actualX*actualX
mousesqY=实际*实际
sqR=buttonObj.r*buttonObj.r
sqC=鼠标QX+鼠标QY
if（sqC

以下是如何测试用户2是否在用户1的绘画中

创建第二个画布，用于点击测试用户2是否在用户1的绘画中

命中测试画布与绘图画布的大小相同，但它只包含用户1的绘画…而不是图像

当用户#1在绘画时，也在命中画布上绘制他们的绘画

当用户#1完成绘制时，从命中画布保存其所有绘制

您至少有两种方法可以从点击画布保存用户#1的绘画：

• 序列化重新创建用户1绘制的形状/路径所需的所有画布命令
• 使用canvas.toDataURL将命中画布另存为图像

当用户#2单击时，检查命中画布上的对应像素是否已填充或透明（alpha>0）

下面是代码和小提琴：

正文{背景色：象牙色；填充：15px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var hit=document.getElementById（“hit”）；
var hitCtx=hit.getContext（“2d”）；
var user2=document.getElementById（“user2”）；
var ctx2=user2.getContext（“2d”）；
var canvasOffset=$（“#user2”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var图像数据；
var hitWidth=hit.width；
var img=document.createElement（“img”）；
img.onload=函数（）{
//左画布：图像+用户#1幅画
ctx.globalAlpha=.25；
ctx.drawImage（img，0,0）；
ctx.globalAlpha=1.00；
涂鸦（ctx，“黑色”）；
//中间画布：仅用户1幅画（用于测试）
涂鸦（hitCtx，“黑色”）；
//右画布：用户#2
ctx2.drawImage（img，0,0）；
imageDataData=hitCtx.getImageData（0,0，hit.width，hit.height）；
}
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";
函数涂鸦（上下文、颜色）{
context.beginPath（）；
上下文。moveTo（70,2）；
上下文。lineTo（139,41）；
上下文。lineTo（70,41）；
closePath（）；
上下文.rect（39,54,22,30）；
arc（73115,3,0，Math.PI*2，false）；
context.fillStyle=color；
context.fill（）；
}
功能手柄移动（e）{
var mouseX=parseInt（e.clientX-offsetX）；
var mouseY=parseInt（e.clientY-offsetY）；
//如果用户#2点击了用户#1的绘画，中间画布将变为红色
var color=“黑色”；
如果（isHit（mouseX，mouseY））{color=“red”；}
涂鸦（hitCtx，彩色）；
}
函数isHit（x，y）{
var-pixPos=（x+y*hitWidth）*4+3；
返回（imageDataData[pixPos]>10）
}
$（“#user2”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}); // end$（函数（）{}）；
左图：用户#1绘制的原始图像

Mid：用户#1只喷漆（用于命中测试）

右：用户#2（将鼠标移到命中区域）

就我所知，您想检测什么样的形状？因此，如果用户#1绘制了一条曲线，您是想检测曲线或其边界框，还是要检测绘制曲线的图像的象限，还是其他什么？@markE the squiggly

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


 var button = new Object();
    button.x = 50;
    button.y = 50;
    button.width = 50;
    button.height = 50;
    button.rgb = "rgb(0, 0, 255)";
    function drawbutton(buttonobject)
    {
        context.fillStyle = buttonobject.rgb;
        context.fillRect (buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height);
        context.strokeRect(buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height);
    }
    drawbutton(button);


    function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY)
    {
        if(((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height))))
            return true;
        else
            return false;
    }

    $("#myCanvas").click(function(eventObject) {
        mouseX = eventObject.pageX - this.offsetLeft;
        mouseY = eventObject.pageY - this.offsetTop;

        if(checkIfInsideButtonCoordinates(button, mouseX, mouseY))
        {
            button.rgb = "rgb(0, 255, 0)";
            drawbutton(button);
        } else {
            button.rgb = "rgb(255, 0, 0)";
            drawbutton(button);
        }
    });

function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY) {
actualX = mouseX - buttonObj.x
actualY = mouseY - buttonObj.y
mousesqX = actualX * actualX
mousesqY = actualY * actualY
sqR = buttonObj.r * buttonObj.r
sqC = mousesqX + mousesqY

if (sqC < sqR) return true;
    else return false;
}

    // getImageData for the hit-test canvas (this canvas just contains user#1's paintings)
    imageDataData=hitCtx.getImageData(0,0,hit.width,hit.height).data;

    // look at the pixel under user#2's mouse
    // return true if that pixel is filled (not transparent) 
    function isHit(x,y){
        var pixPos=(x+y*hitWidth)*4+3; 
        return( imageDataData[pixPos]>10)
    }

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var hit=document.getElementById("hit");
    var hitCtx=hit.getContext("2d");
    var user2=document.getElementById("user2");
    var ctx2=user2.getContext("2d");

    var canvasOffset=$("#user2").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var imageDataData;
    var hitWidth=hit.width;

    var img=document.createElement("img");
    img.onload=function(){

        // left canvas: image+user#1 paintings
        ctx.globalAlpha=.25;
        ctx.drawImage(img,0,0);
        ctx.globalAlpha=1.00;
        scribble(ctx,"black");

        // mid canvas: just user#1 paintings (used for hittests)
        scribble(hitCtx,"black");

        // right canvas: user#2
        ctx2.drawImage(img,0,0);

        imageDataData=hitCtx.getImageData(0,0,hit.width,hit.height).data;

    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";


    function scribble(context,color){
        context.beginPath();
        context.moveTo(70,2);
        context.lineTo(139,41);
        context.lineTo(70,41);
        context.closePath();
        context.rect(39,54,22,30);
        context.arc(73,115,3,0,Math.PI*2,false);
        context.fillStyle=color;
        context.fill();
    }


    function handleMouseMove(e){
      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      // If user#2 has a hit on user#1's painting, mid-canvas turns red
      var color="black";
      if(isHit(mouseX,mouseY)){ color="red"; }
      scribble(hitCtx,color);
    }


    function isHit(x,y){
        var pixPos=(x+y*hitWidth)*4+3; 
        return( imageDataData[pixPos]>10)
    }


    $("#user2").mousemove(function(e){handleMouseMove(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <p>Left: original image with user#1 painting</p>
    <p>Mid: user#1 painting only (used for hit-testing)</p>
    <p>Right: user#2 (move mouse over hit areas)</p>
    <canvas id="canvas" width=140 height=140></canvas>
    <canvas id="hit" width=140 height=140></canvas>
    <canvas id="user2" width=140 height=140></canvas><br>
</body>
</html>