Paper.js 之字形路径

Question

我正在使用 paper.js 并尝试创建函数来创建 zizag 路径。我已使用 getPointAt 将路径划分为多个段，现在尝试通过添加法线来调整锯齿形 sketch 和代码。提前致谢 代码：

var zag= new Path()
var start= new Point(view.center)
var end= start.add(300,200)
zag.add(start, end)
zag.strokeColor="black"

var count= 20, length= zag.length;
for(var i= 0; i<count; i++){
 var offset= i / count * length
 var normal= zag.getNormalAt(offset) * 30
 zag.add(zag.getPointAt(offset))
 zag.segments[i].point.add(i%2==0?normal:-normal)
console.log(normal)
 
}
zag.selected= true

Answer 1

您应该使用不同于原始路径的另一条路径来构建您的之字形，因为您正在对其进行变异，这可能会改变点/法线的计算。
这是一个更正的sketch，您应该可以轻松地适应您的用例。

const line = new Path();
const start = new Point(view.center);
const end = start.add(300, 200);
line.add(start, end);
line.strokeColor = 'black';

const zigZag = new Path();
zigZag.selected = true;

const count = 20, length = line.length;
for (let i = 0; i <= count; i++) {
    const offset = i / count * length;
    const normal = i === 0 || i === count
        ? new Point(0, 0)
        : line.getNormalAt(offset) * 30;
    const point = line.getPointAt(offset).add(i % 2 == 0 ? normal : -normal);
    zigZag.add(point);
}

project.activeLayer.fitBounds(view.bounds.scale(0.8));