좌표가 섹터 내에 있는지 확인하십시오.

Question

원의 섹터 내에있는 픽셀을 강조 표시하려고합니다. 이 작업을 수행하기위한 쉐이더를 작성 중이지만 올바르게 구현 될 때까지 JavaScript로 로직을 구현하고 있습니다.

기본적으로 각 픽셀 캔버스 좌표는 0과 1 사이로 스케일링하고 캔버스 컨텍스트와 함께 다음과 같은 코드로 전달된다

가

function isWithinSector(ctx, x, y) { 
    let startAngle = degToRad(135), endAngle = degToRad(205); 

    // Distance of pixel from the circle origin (0.5, 0.5). 
    let dx = scaledX - 0.5; 
    let dy = scaledY - 0.5; 

    let angle = Math.atan2(dy, dx); 

    if (angle >= startAngle && angle <= endAngle) { 
    ctx.fillStyle = "rgba(255, 255, 0, .5)"; 
    ctx.fillRect(x, y, 1, 1); 
    } 
} 

이 어떤 각도에 대해 잘 작동하지만 다른 사람들을 위해. 픽셀은 135 사이 205도는 다음과 같이 나타납니다 강조 (즉에만 135 ~ 180도 강조 표시됩니다) : 강조 표시된 픽셀 내 블랙 아크 (진리의 소스) 일치하지 않음을

참고. 나는 Google에서 온갖 종류의 것을 시도해 왔지만 나는 갇혀있다.

문제를 나타내는 CodePen이 있습니다 (https://codepen.io/chrisparton1991/pen/XRpqXb). 아무도 내가 알고리즘에서 잘못하고있는 것에 대해 안내 할 수 있습니까?

감사합니다.

Answer 1

atan2 함수가 360 ° 더 작은 음의 각도를 반환하므로 각도가 180 °보다 큰 경우 문제가 발생합니다. 이것은

let angle = Math.atan2(dy, dx); 
if (angle<0) angle += 2*Math.PI; 

에 의해 수정하지만 10 ° 350 °에서 부문을 강조하려는 경우 즉, 작은 분야는 0 ° 선을 포함, 여전히 충분하지 않습니다 수 있습니다. 다음 확장 표준화 절차가 도움이됩니다.

let angle = Math.atan2(dy, dx); 
let before = angle-startAngle; 
if(before < -Math.PI) 
    before += 2*Math.PI; 
let after = angle-endAngle; 
if(after < -Math.PI) 
    after += 2*Math.PI; 

화면 원점이 좌표 (0,1)을 넣는 오른쪽 상단이므로 이미지의 위아래가 위아래입니다.