Paper.js zigzag path | 易学教程

问题

Im using paper.js and attempting to created function to create zizag paths. I have divided the path up in to segments, using getPointAt and now trying ad the zigzag by adding the normals sketch and code. Thanks in advance code:


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

回答1:

You should use another path than the original one to build your zigzag because you are mutating it and this might alter the points/normals calculations.
Here is a corrected sketch which you should easily be able to adapt to your use case.

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

来源：https://stackoverflow.com/questions/65797267/paper-js-zigzag-path

标签

paperjs