检查坐标是否在扇区内

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度）：

请注意，突出显示的像素与我的黑弧（真实来源）不匹配。我一直在尝试谷歌的各种各样的东西，但我被困住了。

我有一个显示问题的CodePen：https://codepen.io/chrisparton1991/pen/XRpqXb。任何人都可以指导我在我的算法中做错了吗？

谢谢！

Answer 1

如果角度大于180°，则会出现问题，因为atan2功能将返回小于360°的负角度。

可以纠正这个问题

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

但是，如果要突出显示350°到10°的扇区，即包含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）。