如果在圓圈中找到點擊的點，打印擬合消息

Question

我有一箇中心座標(x1,y1)和兩個圓的半徑（r）。

我還有一點A(x2,y2)，它是鼠標點擊的點。

我寫了一個函數，打印一條消息，如果點A發現在一個圓或內部。

這是我的jsfiddle：

http://jsfiddle.net/alonshmiel/c4upM/22/

我想知道接下來的事情：

if the clicked pixel is inside the lightblue circle, print 1. 
else if the clicked pixel is inside the gray circle, print 2. 
else print 3. 

我建立在函數內部這些圈子：circleInArc。

另外，我在javascript區域寫了函數：$('#canvas').on('click', function(event) {..}和function isPointInsideCircle(center_x, center_y, radius, x, y) {..}。還有另外一些功能是我在html區域編寫的（如circleInArc）。

請幫我，

任何幫助讚賞！

Answer 1

爲了應對單擊小圓圈

• 當創建小藍和灰色圓圈事件，當鼠標事件發生時挽救他們的x/y座標和半徑信息

• ，使用你的pointInside測試來查看鼠標是否在任一圈內。

演示：http://jsfiddle.net/m1erickson/nrXNh/

的代碼可能是這樣的：

// When a circle is created send back its x,y & radius 
    // We use this info to later check if the mouse is inside this particular circle 

    function circleInArc(fillColor,radianAngle){ 
     var x=cx+radius*Math.cos(radianAngle); 
     var y=cy+radius*Math.sin(radianAngle); 
     ctx.beginPath(); 
     ctx.arc(x,y,linewidth/2,0,Math.PI*2); 
     ctx.closePath(); 
     ctx.fillStyle=fillColor; 
     ctx.fill(); 
     return({x:x,y:y,radius:linewidth/2}); 
    } 


    // save both circles x,y & radius in a javascript object when calling circleInArc 

    var circle1=circleInArc("skyblue",PI*1.5); 
    var circle2=circleInArc("lightgray",PI*1.25); 


    // listen for mousedown events 
    // I use jquery, but you could substitute pure javascript if you prefer 

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


    // when a mousedown occurs, test both circles to see if the mouse is inside 
    // then put up an alert with the results of the tests 

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

     // test circle1 
     var dx=mouseX-circle1.x; 
     var dy=mouseY-circle1.y; 
     var rSquared=circle1.radius*circle1.radius; 
     if(dx*dx+dy*dy<rSquared){ 
      alert("Clicked in circle#1"); 
      return; 
     } 

     // test circle2 
     var dx=mouseX-circle2.x; 
     var dy=mouseY-circle2.y; 
     var rSquared=circle2.radius*circle2.radius; 
     if(dx*dx+dy*dy<rSquared){ 
      alert("Clicked in circle#2"); 
      return; 
     } 

     // otherwise outside circles 
     alert("Clicked outside circle#1 and circle#2"); 

    }