我正在使用 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 的实用方法。