检查坐标是否在扇区内

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

如果角度大于 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) 的位置。