Question

我是在JavaScript（SVG或Canvas）中这样做的，但我真的只是在寻找伪代码，以便有人能够做到这一点：

如果给定一个矩形，如何用类似于这张图片的各种大小的非重叠三角形填充它： http://imgur.com/5XOxpjB

更新

以下是我为那些感兴趣的人提出的建议。我使用了具有很好的delaunay功能的D3.js来做到这一点。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我会做以下事情：

为您的点定义2D数组，每行1D，其中每个条目包含一个顶点/角点。
根据网格创建点
使用某种形式的＆＃34;抖动＆＃34;抵消相同的点数。抖动只会偏移点的位置，但数组中的顺序仍然相同
让一个循环遍历数组的方法为两行中的每两个点绘制一个象限
使用两个相对的角顶点将该象限分割成两个三角形。

变化的抖动应该创建一个类似于图像中所示的模式。要控制抖动，您可以随机化角度和半径，而不仅仅是位置。然后将结果转换为新位置。

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-gons，后者可能有点挑战，但请检查Delaunay triangulation这一点。

Answer 2

有人已经写了一个库来做这件事。 http://qrohlf.com/trianglify/

创建一个用三角形填充的矩形

2 个答案: