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

Question

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

如果给定一个矩形，如何用类似于下图的各种大小、不重叠的三 Angular 形填充它: /image/skvvw.jpg

更新

以下是我为感兴趣的人想出的内容。我使用了 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

我会执行以下操作:

• 为您的点定义一个二维数组，为每条线定义一维数组，其中每个条目包含一个顶点/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但请注意，您最终会得到二次多边形和多边形，后者可能有点挑战，但请检查 Delaunay triangulation为此。