javascript - 如何使用一组点创建 ZigZag 模式

Question

我在 svg 中工作，想使用给定的点集创建一个图案。我的之字形图案是“等边三 Angular 形”。我在 svg 中使用“路径”来创建它。问题是我无法在两点之间找到精确的“中点”来创建“等边三 Angular 形”。

我要求的结果是:-

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

我的代码:-假设我有很多点

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

您需要添加一个垂直于线段的向量，而不是将您的高度添加到my。这里的关键是:二维向量 (dx,dy) 垂直于 (dy,-dx)。

具体来说，而不是:

my -= height;

你应该这样做:

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

上面的scale 常量被选择用来生成一个等边三 Angular 形。