Question

我想在画布上画出200个或更多（高流动性）物体并在每个鼠标点击事件上添加鼠标。

像这样的源代码......
（有价值的k是增加）

＆＃39;          ....
         ....
         for（k = 0; k <200; k ++）{                       start = start [k];
                      结束=结束[k];
        x1 = centerX-radius * Math.sin（-arg * start）* 0.9;
        y1 = centerY-radius * Math.cos（-arg * start）* 0.9;
        x2 = centerX-radius * Math.sin（-arg * start）* 0.95;
        y2 = centerY-radius * Math.cos（-arg * start）* 0.95;
        x3 = centerX-radius * Math.sin（-arg * end）* 0.95;
        y3 = centerY-radius * Math.cos（-arg * end）* 0.95;
        x4 = centerX-radius * Math.sin（-arg * end）* 0.9;
        y4 = centerY-radius * Math.cos（-arg * end）* 0.9;

    Shape(ctx, x1,y1,x2,y2,x3,y3,x4,y4,k);

}

    function Shape(ctx, x1,y1,x2,y2,x3,y3,x4,y4, k){
        ctx.strokeStyle = "black";
        ctx.fillStyle = "red";    
        ctx.globalAlpha = 1.0; 
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2); 
        ctx.lineTo(x3,y3); 
        ctx.lineTo(x4,y4); 
        ctx.lineTo(x1,y1);
        ctx.lineWidth = 0.5;
        ctx.fill();
        ctx.stroke();
        ctx.fillText(k,(x2+x3)/2,(y2+y3)/2);    
    }

    ....
     ....

我的希望是...... 如果将鼠标悬停在形状上，则显示有效的k
如果鼠标点击形状，请转到具有可靠k参数的其他URL
但是，我不想使用图像

请帮我。

谢谢。

Answer 1

如果将形状的坐标保留在数组中，则可以循环使用它们并检查与鼠标坐标的碰撞。

Answer 2

画布就像位图一样。对像素进行所有更改，并且不保留线或路径的痕迹。如果要查看某个路径上是否有点击，您需要实现自己的命中测试。如果您绘制的形状可以相互重叠，则需要自己处理订单。这是可行的，但你是独立的。

另一种方法是使用SVG代替。因为SVG是对象，所以浏览器会为您跟踪它们。您只需将onclick添加到SVG元素，就像对HTML元素一样。

最简单的解决方案就是使用像d3这样的库：http://d3js.org/

Answer 3

由于你的形状是不规则的，因此很难用数学方法进行击打测试。

幸运的是，上下文有isPointInPath方法，它将测试提供的mouseX / mouseY是否在最后定义的路径中。

要测试你的不规则形状：

保留足够的信息以重新定义对象中的每个路径。
将每个形状对象添加到数组中。
在mousemove事件处理程序中......
遍历数组
重新定义每个形状（每次1个）。注意：重新定义是在没有笔划/填充的情况下绘制的。
如果鼠标位于最后定义的形状内，请使用context.isPointInPath(mouseX,mouseY)进行测试。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/o5xp21t2/

<!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; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    ctx.strokeStyle = "black";
    ctx.fillStyle = "red";    
    ctx.globalAlpha = 1.0; 
    ctx.lineWidth = 0.5;
    ctx.font="14px verdana";

    var centerX=150;
    var centerY=150;
    var radius=120;
    var arg=1;
    var start=0;
    var end=Math.PI/8;
    var shapes=[];

    for(var k=0;k<10;k++){
        start+=Math.PI/8;
        end+=Math.PI/8;
        x1 = centerX-radius*Math.sin(-arg*start)*0.9;
        y1 = centerY-radius*Math.cos(-arg*start)*0.9;
        x2 = centerX-radius*Math.sin(-arg*start)*0.95;
        y2 = centerY-radius*Math.cos(-arg*start)*0.95;
        x3 = centerX-radius*Math.sin(-arg*end)*0.95;
        y3 = centerY-radius*Math.cos(-arg*end)*0.95;
        x4 = centerX-radius*Math.sin(-arg*end)*0.9;
        y4 = centerY-radius*Math.cos(-arg*end)*0.9; 
        var s={x1:x1,y1:y1,x2:x2,y2:y2,x3:x3,y3:y3,x4:x4,y4:y4,k:k};
        shapes.push(s);
        Shape(s,k,true);
    }

    $results=$("#results");

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

    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      for(var k=0;k<shapes.length;k++){
          Shape(shapes[k],k,false);
          if(ctx.isPointInPath(mouseX,mouseY)){
              $results.text("Last mouseover: "+k);
          }
      }
    }

    function Shape(s, k, draw){
        ctx.fillStyle="red";
        ctx.beginPath();
        ctx.moveTo(s.x1,s.y1);
        ctx.lineTo(s.x2,s.y2); 
        ctx.lineTo(s.x3,s.y3); 
        ctx.lineTo(s.x4,s.y4); 
        ctx.lineTo(s.x1,s.y1);
        if(draw){
            ctx.fill();
            ctx.stroke();
            ctx.fillStyle="blue";
            ctx.fillText(k,(s.x2+s.x3)/2,(s.y2+s.y3)/2);    
        }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <p id=results>Hover mouse over shapes.</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

如何在绘图画布组件中添加鼠标事件

3 个答案: