algorithm - 我如何在 SVG 中绘制这个形状？

Question

我一直在想一个优雅的算法来用 SVG 绘制它，但它让我望而却步。

仅绘制线框非常简单。它只是从每个角到它右侧边缘的线，目标点的间距相等。但是填充它们比较棘手——我需要实际的多边形坐标来绘制填充的形状……不是吗？

一种方法是用一点数学来解决所有的线段交叉点。这会给我所有交叉点的坐标，但我怎么知道如何将四个坐标分组，并跟踪要填充的坐标？

Answer 1

您的图片可以分成 4 个相等的部分，它们是点对称的，除了黑白瓷砖的交换。例如，要计算底部象限，您可以遍历从左下角 (x1, y1) 开始的所有行，然后向右边缘移动 (x2, y2)，然后遍历所有可以从左上角(x3, y3)到底部边缘(x4, y4)的线，计算交点并将它们保存在矩阵 Px 和 Py 中。我懒得做数学，所以我只是输入了 line intersections 的公式。 .最后，如果索引 ix 和 iy 的总和为奇数，则迭代矩阵并在相邻点之间绘制一个补丁。

使用 Python/matplotlib 的示例:

from __future__ import division
import matplotlib.pyplot as plt
import numpy as np

def intersect(x1, y1, x2, y2, x3, y3, x4, y4):
    det = (x1-x2)*(y3-y4) - (y1-y2)*(x3-x4)
    px = ((x1*y2-y1*x2)*(x3-x4) - (x1-x2)*(x3*y4-y3*x4)) / det
    py = ((x1*y2-y1*x2)*(y3-y4) - (y1-y2)*(x3*y4-y3*x4)) / det
    return px, py

n = 10
Px = np.zeros((n+1, n+1))
Py = np.zeros((n+1, n+1))

x1, y1 = 0, 0
x2 = 1
x3, y3 = 0, 1
y4 = 0
for ix in range(n+1): # index left to right along bottom
    x4 = ix / n
    for iy in range(n+1): # index bottom to top along right side
        y2 = iy / n
        px, py = intersect(x1, y1, x2, y2, x3, y3, x4, y4)
        plt.plot([x1,x2], [y1,y2], 'k')
        plt.plot([x3,x4], [y3,y4], 'k')
        plt.plot(px, py, '.r', markersize=10, zorder=3)
        Px[ix, iy] = px
        Py[ix, iy] = py

for ix in range(n):
    for iy in range(n):
        if (ix + iy) % 2: # only plot if sum is odd
            xy = [[Px[ix, iy], Py[ix, iy]], # rectangle of neighboring points
                  [Px[ix, iy+1], Py[ix, iy+1]],
                  [Px[ix+1, iy+1], Py[ix+1, iy+1]],
                  [Px[ix+1, iy], Py[ix+1, iy]]]
            poly = plt.Polygon(xy,facecolor='gray',edgecolor='none')
            plt.gca().add_patch(poly)
plt.show()   

此代码可能会进一步优化，但像这样应该相当清楚它的作用。

结果: 将其扩展到所有 4 个象限并将其编写为 SVG 文件作为练习留给读者 :)。