javascript - 圆周上的点

Question

我在获取圆周上的所有点(整数)时遇到问题。

这是我当前的代码:

function getPixelsInRect(x, y, width, height) {
   var result = [];

   for (var i = y; i < y + height; i++) {
       for (var j = x; j < x + width; j++) {
           result.push([ j, i ]);
       }
   }

   return result;
}

function getPixelsOnCircle(x, y, radius) {
  return getPixelsInRect(x - radius, y - radius, radius * 2, radius *    2).filter(function(pixel) {
    return Math.pow(pixel[0] - x, 2) + Math.pow(pixel[1] - y, 2) == (radius * radius);
  });
}

它过滤掉不在圆周上的所有点。这显然没有发挥应有的作用，而且我确信这不是正确的方法。有什么建议吗？

(jsfiddle链接:https://jsfiddle.net/852Loubf/)

Answer 1

嗯，我认为这是因为你将距离与半径比较得太严格

我做了一些更改以考虑阈值，您可以使用新参数threshold，它是一种厚度。低于 1 它不会是一条连续的线。 (fiddle updated)

function getPixelsOnCircle(x, y, radius, threshold) {
    threshold = threshold === undefined ? 1 : threshold;

    return getPixelsInRect(x - radius, y - radius, radius * 2, radius * 2).filter(function(pixel) {
        var rectDist = Math.pow(pixel[0] - x, 2) + Math.pow(pixel[1] - y, 2);
        var rectDistSmoothed = Math.round(rectDist / radius);

        return  rectDistSmoothed <= radius && rectDistSmoothed >= radius - threshold;
    });
}

您的 drawPoints 函数也需要修复:

points.forEach(function(point) {
    ctx.fillRect(point[0] - 0.5, point[1] - 0.5, 1, 1);
});

和getPixelsInRect:

for (var i = y; i <= y + height; i++) {
    for (var j = x; j <= x + width; j++) {
        result.push([ j, i ]);
    }
}