konvajs - 在 Konva 层内绘制矩形，由均匀分布的区域限定

Question

我正在使用 Konva.js 来渲染一些彩色盒子。

我有一个舞台，该舞台内有一些设定的大小和区域，由点（例如矩形，但它们可以是任何多边形）限制。

然后我需要在这个区域内添加一些较小的矩形，这样它们看起来不错并且分布均匀。

例如

// these numbers are an example only, irrelevant
let width = 500 * 1.936402653140851;
let height = 500;
// setup stage, boilerplate
var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

// region layer - boundaries
var regionLayer = new Konva.Layer({
    scale: {x: width/4963, y: height/2563} // these numbers are an example only, irrelevant
    });
    stage.add(regionLayer);

// for this example, a single region, L-shaped on it's side
   let box = new Konva.Line({
                  name: 'region-1',
                  points: [1067, 681,
                            3337, 681, 
                            3337, 987, 
                            3037, 987,
                            3037, 787,
                            1067, 787],
                  closed: true,
                  fill: 'blue',
                                    opacity: 0.5
              });
    regionLayer.add(box);
    
    regionLayer.draw();


// layer to draw rects in 
    let rectsLayer = new Konva.Layer({
    scale: {x: width/4963, y: height/2563} // these numbers are an example only, irrelevant
    });

     
     for (let i = 0; i < 90; i++) { // e.g. some number up to X
     let rect = new Konva.Rect({
        width: 20,
        height: 20,
        fill: 'red',
        x: 1067 + 40 * (i + 1),
        y: 681  + 20
     });
     rectsLayer.add(rect);
     
     }
    stage.add(rectsLayer);
    rectsLayer.draw();

上面的结果是这样的

我想要的是那些只填充我的多边形边界内的自由区域的盒子。

我读了一大堆关于 Delauney 三角剖分、Voronoi 图和正态分布排序以实现它，但遗憾的是我想出了 zilch 的实用方法。

https://jsfiddle.net/x4aksz1y/2/

标签： konvajskonva