1

我有一个名为城市的数组，其中包含代表城市及其笛卡尔点的对象。从数据库中查询这些城市，然后在画布中绘制（效果很好）并推送到这个数组中。现在我想点击这些点，我想提醒（“你好”）进行测试。

$(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 区域时得到反应。

请帮忙

4

2 回答 2

2

在画布上测试城市圈

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

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>
于 2013-03-27T19:20:10.190 回答
0

毕达哥拉斯是个不错的选择，除了可以尝试isPointInPath方法外，所有其他人都可以尝试。

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

您使用 x, y 点调用该方法。

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

查看此链接以获取示例。

于 2013-03-28T01:31:34.740 回答