检查坐标是否在一个扇区内

Question

我试图突出显示圆圈内的像素。我正在编写一个着色器来执行此操作，但我正在 JavaScript 中实现逻辑，直到我做对为止。

本质上，canvas 中的每个像素坐标都被缩放到 0 到 1 之间，并与 canvas 上下文一起传递到以下代码中：

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 函数将 return 一个小于 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) 的位置。

检查坐标是否在一个扇区内

Check if coordinates are within a sector

javascript

math

trigonometry