Question

我有一个名为cities的数组，其中包含用笛卡尔点表示城市的对象。从数据库查询这些城市，然后在画布中绘制（工作正常）并推入此数组。现在我想点击这些点，我想提示（“你好”）进行测试。

$(document).mousemove(function(e) {
    x = e.pageX;
    y = e.pageY;
});
$(document).click(function(e) {
    newx=x;
    newy=y;
    for(var i=0;i<cities.length;i++){
        if ((newx <= cities[i].x+3) && (newx >= cities[i].x-3) && (newy <= cities[i].y+3) && (newy >= cities[i].y-3)) {
            alert(cities[i].name);
        }
    }
});

这是我的活动代码。现在，当我点击从我的点到画布边缘的+ x和-y区域时，我只会得到一个反应。

请帮助

Answer 1

在画布上点击测试城市圈

要检查用户是否点击了某个城市圈子，请使用此与毕达哥拉斯相关的点击测试：

var dx = cityCenterX – clickX;
var dy = cityCenterY – clickY;
var radius=cityRadius;
var IsInCity = (dx*dx+dy*dy)<(cityRadius*cityRadius);

这是代码和小提琴：http://jsfiddle.net/m1erickson/Bgh9d/

<!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 canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    // define some cities
    var cities=[];
    cities.push({x:100, y:75,  radius:50, name:"large city"});
    cities.push({x:200, y:100, radius:30, name:"medium city"});
    cities.push({x:150, y:150, radius:25, name:"small city"});

    // draw cities
    ctx.beginPath();
    ctx.lineWidth=3;
    ctx.strokeStyle="blue";
    for (var i=0;i<cities.length;i++){
        ctx.beginPath();
        ctx.arc(cities[i].x, cities[i].y, cities[i].radius, 0 , 2 * Math.PI, false);
        ctx.stroke();
    }

    function handleMouseDown(e){
      // get canvasXY of click
      canvasMouseX=parseInt(e.clientX-offsetX);
      canvasMouseY=parseInt(e.clientY-offsetY);

      // test if we clicked in any cities
      for(var i=0;i<cities.length;i++){
          var dx=canvasMouseX-cities[i].x;
          var dy=canvasMouseY-cities[i].y;
          var isInCity=(dx*dx+dy*dy)<(cities[i].radius*cities[i].radius);
          if(isInCity){
              alert("You clicked in the "+cities[i].name);
          }
      }
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

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

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

毕达哥拉斯是一个选择家伙，除了可能尝试 isPointInPath 方法。

您没有说，但如果您使用“路径”（context.beginPath，context.moveTo，context.lineTo等）将您的城市绘制到画布上，那么您应该看一下内置isPointInPath方法。

使用x，y点调用方法。

if(context.isPointInPath(50, 150)) {
     alert('In path);
}

查看this link以获取示例。

单击“画布”中的圆弧

2 个答案: