paper.js 中画布上用点填充的圆圈答案

【问题标题】：Circle filled with points on canvas in paper.jspaper.js 中画布上用点填充的圆圈
【发布时间】：2016-03-09 22:59:57
【问题描述】：

我正在尝试填充一个用矩形填充的圆形区域（准确地说，光栅宽度尺寸为 12x20）。

经过一些研究和实验，我找到了一种解决方案。画一个圆，获取它的边界框并遍历每个像素以发现距离小于或等于圆 R。

这里有一些代码示例，我用的是three.js

let shapeSize = [12, 20];

let circleR = R / 2;
let circle = new Circle(position, circleR);
let bounds = circle.bounds;
for (let i = bounds.x; i <= bounds.x + bounds.width; i += 1) {
  for (let j = bounds.y; j <= bounds.y + bounds.height; j += 20) {
    let center = new Point(i, j);
    if (center.getDistance(position) <= circleR) {
      center = new Point(i, j);
      let shape = new Shape({center, alpha: 0.7, scale: 0.8});
      j += shapeSize[1] - 1; // this part smells 
    }
  }
}

形状为方形，带有一个 12x20 尺寸。

但是使用此代码示例，不可能得到一个充满正方形的圆圈。如果我增加 i+=12 和 y+=20，我会得到太多的空间，如果每个正方形都在另一个上面，那么它会生成太多的正方形。

你知道如何让它变得漂亮和优雅吗？

【问题讨论】：

clipMask 有帮助吗？
但是我需要以各种方向和方式移动圆圈内的每个形状，clipMask可以吗？

标签： javascript canvas geometry drawing paperjs

【解决方案1】：

正如 JJ23 所说，您可以将圆圈用作包含您的栅格网格的组的剪贴蒙版。
这是一个 Sketch 演示如何使用 Paper.js 进行操作。

// constants
var RADIUS       = 200;
var IMAGE        = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAIAAAA2kktGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE82lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA5LTI2VDA5OjE0OjQ5KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA5LTI2VDA5OjE0OjQ5KzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wOS0yNlQwOToxNDo0OSswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTYwZDg3MWYtZmFjOS0wYTRjLThmOGQtYjdmNDdhMGRiYzBlIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU2MGQ4NzFmLWZhYzktMGE0Yy04ZjhkLWI3ZjQ3YTBkYmMwZSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjU2MGQ4NzFmLWZhYzktMGE0Yy04ZjhkLWI3ZjQ3YTBkYmMwZSIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTYwZDg3MWYtZmFjOS0wYTRjLThmOGQtYjdmNDdhMGRiYzBlIiBzdEV2dDp3aGVuPSIyMDE4LTA5LTI2VDA5OjE0OjQ5KzAyOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+tv5OvAAAAiRJREFUKJFdks9qKjEUxs9JJk5GHdFBqEVBEAa6UHwA22codNeVWze+WR9CXHbRhZsqtP7BjjAYGWWs4+gkuYvI5XKzCt/5nZzvnBMkhCilAAAAOOe2bedyOUppkiRxHCulKKWWIRDR87xOp9NoNCilQRB8f3+fz+c0TSuVimXeKBQK/X7/9fU1CIK3t7fZbBaG4eVyQcTL5WIY8H3//f396+trOBzWajXHccrlsm3biEgIIQayLAsAFovFeDwWQriu2263Pc8DAK31rZwQYjKZMMbiONZaSylXq9XxeDQQJYRora/X63a73Ww28/k8TdM0TU+nU5qmt7bu7+/DMFRKMcYYY1mWcc5rtVqxWFwul1EUaa3J4+Mj5xwAsixLkoQx1m63X15eer2e0QGADgaDz89Pk4GIACCl/Pn5mUwmQgillNbauru7q1QqiKi1Nv6CIAiCQCll27bZh7Xf77MsAwBKKSJyzi3LklIqpZRSt1C9Xv/4+EiSpFgsIuL1epVSaq2zLCOE5HI5AEDf91erFWOsVCoBgFkF59x13Uaj4XnedDq11uu1ydvtdlprxpjrus1m8+npqdvtRlFEKUXbtvP5/OFwcBzH87zT6fT7++s4ju/71Wp1vV5HUYQPDw/7/V4I0Wq1np+fN5vNaDQKw9C0opSSUlpCiOPxiIjlcvl8PsdxLKU00zIX89sQAAghjDFjzgwQ/j0G+k8hhPzVOed/AJQ+QEC6tzaSAAAAAElFTkSuQmCC';
var IMAGE_WIDTH  = 12;
var IMAGE_HEIGHT = 20;

// create image
var raster    = new Raster(IMAGE);
// wait for image loading
raster.onLoad = function ()
{
    // draw raster grid as a group
    var group  = new Group();
    var stepsX = Math.ceil(RADIUS * 2 / IMAGE_WIDTH);
    var stepsY = Math.ceil(RADIUS * 2 / IMAGE_HEIGHT);
    for (var i = 0; i < stepsX; i++)
    {
        for (var j = 0; j < stepsY; j++)
        {
            // calculate grid point
            var point            = new Point(i * IMAGE_WIDTH, j * IMAGE_HEIGHT);
            // clone original raster
            var rasterClone      = raster.clone();
            // position it at grid point
            rasterClone.position = point;
            // add it to the group
            group.addChild(rasterClone);
        }
    }

    // draw circle
    var circle = new Path.Circle(group.position, RADIUS);
    // add it to the group as first child
    group.insertChild(0, circle);
    // enable clipping
    group.clipped = true;

    // position group at view center
    group.position = view.center;

    // delete original raster
    raster.remove();
};

【讨论】：