如何使用点集创建ZigZag模式

Question

我在svg工作，想要使用给定的点集创建一个模式。我的锯齿形图案是“等边三角形”。我在svg中使用'Path'来创建它。问题是我无法在两点之间找到确切的“中点”来创建“等边三角”。

我要求的结果是： -

当线不是水平时我得到的结果： -

我的代码： - 假设我有一系列分数

function createZigzag(points){
    var x, y, lx, ly, mx, my, path;
    var height=5;
    for (var i = 0; i < points.length; i++) {
        x = points[i].x;
        y = points[i].y;
        if (i === 0)
        {
            path = 'M ' + (x) + ' ' + (y) + ' L';
            continue;
        }
        lx = points[i - 1].x;
        ly = points[i - 1].y;
        mx = (lx + x) / 2;
        my = (ly + y) / 2;

        my-=height;

        path += ' ' + (mx) + ' ' + (my);
        path += ' ' + (x) + ' ' + (y);
    }
    return path;
}

如果点属于“直线水平线”，则上述逻辑可正常工作。否则，它没有 生成我所需的路径。 问题在于计算'mx，my'（中点）。我搜索了很多，应用线方程等，但无法解决这个问题。

Answer 1

如果您只有直线（可能是旋转的）线，那么您可以使用三角形图案轻松地将其作为填充矩形。

这样的事情：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <pattern id="pat" viewBox="0 0 2 4" width="0.04" height="1" patternUnits="objectBoundingBox">
        <polyline points="-1,4 0,0 1,4 2,0 3,4" stroke="red" stroke-width="0.1" fill="none"/>
    </pattern>

    <rect width="50%" height="20" fill="url(#pat)"/>
    <rect width="50%" height="20" fill="url(#pat)" transform="rotate(25) translate(20 20)"/>
</svg>

请参阅jsfiddle。

Answer 2

您需要添加垂直于线段的矢量，而不是将height添加到my。关键在于：二维向量(dx,dy)垂直于(dy,-dx)。

具体而言，而不是：

my -= height;

你应该做点什么：

scale = sqrt(0.75);
mx += scale * (y - ly);
my -= scale * (x - lx);

选择上面的scale常数来产生等边三角形。

Answer 3

为什么要设置my- = height ...？ 因为我希望这是导致问题的原因。