在畫布中單擊弧線

我有一個名爲城市的數組，其中包含用笛卡爾點表示城市的對象。從數據庫中查詢這些城市，然後在畫布中繪製（工作正常）並將其推入此數組中。現在我想點擊這些點，並且我想提醒（「你好」）用於測試目的。在畫布中單擊弧線

$(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區域時，我只會得到一個反應。

請幫助

來源

2013-03-27 user2216743

命中測試城市圈在畫布上

要檢查，如果用戶在你的城市圈的一個點擊，使用畢達哥拉斯相關的點擊測試：

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-27 19:20:10 markE

畢達哥拉斯是一個選擇傢伙和所有，但也許嘗試isPointInPath方法。

你沒有說，但如果你正在使用「路徑」（context.beginPath，context.moveTo，context.lineTo等）將你的城市繪製到你的畫布上，構建了isPointInPath方法。

您使用x，y點調用方法。

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

查看this link的例子。

來源

2013-03-28 01:31:34 Jarrod

在畫布中單擊弧線

回答

相關問題