paperjs - 带有 paper.js 的鼠标拖动的 ZigZag 路径

Question

嗨，我尝试使用 Path.js 的 onMouseDrag 函数创建曲折路径，但这里有点混乱是一个草图

和代码

var path
var zigzag
var length
var count
var delta=[]
tool.fixedDistance= 20
function onMouseDown(event){
    path= new Path()
    path.add(event.point)
    zigzag= new Path()
}

function onMouseDrag(event){
    event.delta += 90
    path.add(event.delta)
    delta.push(event.delta)
}

function onMouseUp(event){
    length= path.segments.length
    zigzag= new Path()
    zigzag.add(event.point)
    console.log(delta)
    delta.forEach(( zig , i) => {
        zigzag.add(i % 2 == 0 ? zig + 20 : zig - 20)
    })
    zigzag.selected= true
}

标签： paperjs

Answer 1

根据我之前的回答，这里有一个草图，展示了一种可能的方法。

let line;
let zigZag;

function onMouseDown(event) {
    line = new Path({
        segments: [event.point, event.point],
        strokeColor: 'black'
    });
    zigZag = createZigZagFromLine(line);
}

function onMouseDrag(event) {
    line.lastSegment.point = event.point;
    if (zigZag) {
        zigZag.remove();
    }
    zigZag = createZigZagFromLine(line);
}

function createZigZagFromLine(line) {
    const zigZag = new Path({ 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);
    }

    return zigZag;
}