javascript - 创建一个用三 Angular 形填充的矩形

Question

我在 JavaScript(SVG 或 Canvas)中执行此操作，但我实际上只是在寻找伪代码以了解某人如何完成此操作:

如果给定一个矩形，你如何用类似于下图的各种大小的、不重叠的三 Angular 形填充它: http://imgur.com/5XOxpjB

更新

这是我为那些感兴趣的人想出的。我使用 D3.js 来执行此操作，它具有出色的 delaunay 功能。

var width = 360;
var height = 220;

var vertices = d3.range(100).map(function (d) {
    return [Math.random() * width, Math.random() * height];
});

// place coordinates in the corners
[
    [0, 0],
    [width, 0],
    [0, height],
    [width, height]
].forEach(function (d) {
    vertices.push(d);
});

// add the temporary coordinates that will follow mousemove
vertices.unshift([0, 0]);

var svg = d3.select("#main").append("svg")
    .style("width", width + "px")
    .style("height", height + "px")
    .on("mousemove", function () {
    vertices[0] = d3.mouse(this);
    draw();
})
    .on("click", function () {
    vertices.push(d3.mouse(this));
});

var path = svg.append("g").selectAll("path");

draw();

function draw() {
    path = path.data(d3.geom.delaunay(vertices).map(function (d) {
        return "M" + d.join("L") + "Z";
    }), String);
    path.exit().remove();
    path.enter().append("path").attr("class", function (d, i) {
        return "q" + (i % 9) + "-9";
    }).attr("d", String);
}

#main {
    position: relative;
    width: 360px;
    height: 220px;
    border: 1px solid #ddd;
}
path {
    fill: #fff;
    stroke: steelblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="main"></div>

Answer 1

我会做以下事情:

• 为您的点定义一个 2D 数组，每条线为 1D，其中每个条目包含一个顶点/Angular 点。
• 基于网格创建点
• 使用某种形式的“抖动”偏移相同的点。抖动只会抵消点的位置，但数组中的顺序仍然相同
• 有一个方法遍历数组，为两条线上的每两个点绘制一个象限
• 使用两个对 Angular 顶点将该象限分成两个三 Angular 形。

变化的抖动应该会产生如图所示的类似模式。要控制抖动，您可以随机化 Angular 和半径，而不仅仅是位置。然后将其结果转换为新位置。

ASCII 表示(可能没用..):

line 0: xy xy xy xy xy ....  vertices for upper part of quadrant
line 1: xy xy xy xy xy ....  vertices for lower part and shared
                             upper part of next quadrant
line 2: xy xy xy xy xy ....
line 3: xy xy xy xy xy ....
...

应用抖动

无论点的位置是什么，都以有序的方式绘制:

line 0: xy_xy_xy xy xy ....
        | /| /| ...
        |/_|/_|
line 1: xy xy xy xy xy ....
...

您还可以查看 Voronoi diagram但请注意，您最终会得到二次多边形和 n 边形，后者可能有点挑战，但请检查 Delaunay triangulation为此。