HTML5 캔버스를 사용하여 클릭 한 원의 부분을 찾는 방법은 무엇입니까?

Question

HTML5 캔버스와 바닐라 자바 ​​스크립트를 사용하여 Simon 게임을 만들려고합니다. arc() 메소드의 좌표계에 대해 혼란 스럽다. 나는 원을 4 사분면으로 나누었고 클릭 된 사분면의 수를 알려주고 싶다. 그러나 어떤 부분을 클릭했는지 확인하는 방법을 모르겠습니다.

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 

var pads = []; 

var angle = 2 * Math.PI/4; 
var color = ["green","red","blue","yellow"]; 
var Pads = function(x, y, radius, start, end) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.start = start; 
    this.end = end; 

}; 
function drawSimon(radius) { 
for (var i = 0; i < 4; i++) { 
    context.beginPath(); 
    context.moveTo(x, y); 
    context.arc(x, y, radius, i*angle, (i+1)*angle, false); 
    context.lineWidth = radius; 
    context.fillStyle = color[i]; 
    context.fill(); 
    context.lineWidth = 2; 
    context.strokeStyle = '#444'; 
    context.stroke(); 
    var pad = new Pads(x, y, radius, i*angle, (i+1)*angle); 
    pads.push(pad); 
} 

} 

drawSimon(150); 

    $('#myCanvas').click(function (e) { 

    /*for (var i = 0; i < pads.length; i++) { 
    if (//condition matches) { 
     alert (i); 
    } 
    }*/ 
    }); 

Answer 1

https://jsfiddle.net/xawpLdys/1/ 이것은

이 예는 단지 정상 사분면 시스템에 클릭 e.pageX 및 e.pageY 변환하십시오. 그리고 어떤 조건 후에는 클릭 한 부분을 확인할 수 있습니다.

$('#myCanvas').click(function (e) { 
    var nx,ny; 
    nx=-(x- e.pageX); 
    ny=y- e.pageY; 
     if (nx>0 && ny>0){ 
     alert('Yellow'); 
     }else if (nx<0 && ny>0){ 
     alert('Blue'); 
     }else if (nx>0 && ny<0){ 
     alert('Green'); 
     }else if (nx<0 && ny<0){ 
     alert('Red'); 
     } 

    }); 

가 여기에 바이올린

John S 잘했다 https://jsfiddle.net/xawpLdys/3/

UPDATE이다, (그것은 원 밖에 클릭 수를 계산). 원 밖의 클릭 수가 고려되지 않도록하려면 원의 중심과 클릭 한 점으로부터 거리를 찾아야합니다. 그런 다음 원의 반지름과 거리를 비교하여 반지름 안에 있음을 확인하십시오.

업데이트 코드 : 여기

$('#myCanvas').click(function (e) { 
    var nx,ny; 
    nx=-(x- e.pageX); 
    ny=y- e.pageY; 
    var dx = Math.abs(Math.abs(x)-Math.abs(e.pageX)); 
    var dy = Math.abs(Math.abs(y)-Math.abs(e.pageY)); 
    var distance_clicked = Math.sqrt((dx*dx)+(dy*dy)); 
    if(distance_clicked <= radius){ 
     if (nx>0 && ny>0){ 
      alert('Yellow'); 
      }else if (nx<0 && ny>0){ 
      alert('Blue'); 
      }else if (nx>0 && ny<0){ 
      alert('Green'); 
      }else if (nx<0 && ny<0){ 
      alert('Red'); 
      } 
    } 
    }); 

은 여전히 ​​원에게 4 개 이상의 조각으로 분할 제한을 갱신 바이올린 https://jsfiddle.net/xawpLdys/8/

이다.

Answer 2

허용되는 대답은 약간 제한적으로 보입니다. 서클 외부의 클릭 수입니다. 이는 상당히 쉽게 해결 될 수 있지만 여전히 4 개의 섹션으로 제한됩니다. 이 원 안에

1. 먼저 확인하는 경우 : 포인트는 섹터에있는 경우
   확인합니다. 피타고라스의 정리가 여기에 작용합니다. x와 y의 값을 제곱합니다. 합이 제곱 된 반지름보다 작거나 같으면 점은 원 안에 있습니다.
2. 점이 원 안에 있으면 그 각도가 섹터의 시작 각도와 끝 각도 사이인지 확인하십시오. 삼각법의 아크 탄젠트 함수를 사용하여 점의 각도를 얻을 수 있습니다.

---

이 jsfiddle을보십시오. 당신의 원 사분면의 각 비록 웨지 등이 될 수

var Circle = function(center, radius) { 
    this.center = center; 
    this.radius = radius; 

    this._radiusSquared = Math.pow(this.radius, 2); 
} 

$.extend(Circle.prototype, { 
    containsPoint: function(point) { 
     var relPoint = this.pointToRelPoint(point); 
     return Math.pow(relPoint.x, 2) + Math.pow(relPoint.y, 2) 
       <= this._radiusSquared; 
    }, 

    getAngleForPoint: function(point) { 
     var relPoint = this.pointToRelPoint(point); 
     return Math.atan2(-relPoint.y, -relPoint.x) + Math.PI; 
    }, 

    pointToRelPoint: function(point) { 
     return { x: point.x - this.center.x, y: point.y - this.center.y } 
    } 
}); 

var CircleSector = function(startAngle, endAngle) { 
    this.startAngle = startAngle; 
    this.endAngle = endAngle; 
}; 

$.extend(CircleSector.prototype, { 
    containsAngle: function(angle) { 
     return (angle >= this.startAngle) && (angle < this.endAngle); 
    }, 

    containsPoint: function(circle, point) { 
     return circle.containsPoint(point) 
       && this.containsAngle(circle.getAngleForPoint(point)); 
    } 
});