Paper.js锯齿路径

Question

我使用paper.js并尝试创建函数来创建zizag路径。我已经将路径划分为分段，使用getPointAt，现在尝试通过添加法线素描和代码来添加字形。谢谢预先编码：

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

您应该使用另一条路径，而不是原来的路径来构建您的锯齿形，因为您正在变异它，这可能会改变点/法线的计算。

下面是一个经过修正的素描，您应该能够很容易地适应您的用例。

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