Путь ZigZag onMouseDrag с paper.js

Привет, я пытаюсь создать зигзагообразный путь, используя функцию onMouseDrag в Path.js, но получаю некоторую путаницу / f4oG6ilLTPq0VkXZ1l4XCEV17rilqyHOVZWis02I8tcxTv9i / laGytJoYBVktGuJWU1EzB9cGtwzScK8Yhko0tG4FZvKIDwBJ8OhdGtGss8971xzdqd8JTPNT3SZTTj1chi6uXFhtSwEPCSzJoN / Gg24LhuTXlHzjp + 11M / PzbhDQwWB8eZ + DrMR5e51R9MQDEZrjCuuAj / h91x8y5VGYa9CCxBRyBeYUx0p63hCVYgBCTwNrQv3KtBOsBnB0fhbprKYIXKYi7ANi2Os8jIfaSfBuV + iGqCdLPt / дА =»отн = "NOFOLLOW noreferrer"> вот эскиз

и код

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
person James    schedule 21.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Основываясь на моем предыдущем ответе, вот эскиз, демонстрирующий возможный способ сделать это.

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;
}
person sasensi    schedule 25.01.2021
comment
Это фантастика, я хотел бы понять, я чувствую себя учеником Мерлина в данный момент :) Не знаю, почему зигзаг удален на MouseDrag? Я не думаю, что мы могли бы просмотреть код в видеочате, используя одноранговое кодирование Codepens или что-то подобное? - person James; 26.01.2021
comment
У меня что-то получилось на codepen, но это был беспорядок, и есть случайные точки без зигов или загов codepen.io /limitedunlimited/pen/BaLgjjj - person James; 26.01.2021