Jalur ZigZag diMouseDrag dengan paper.js

Hai, saya mencoba membuat jalur zigzag menggunakan fungsi onMouseDrag Path.js tetapi mengalami sedikit kebingungan ini sketsanya

dan kode

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 sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Berdasarkan jawaban saya sebelumnya, berikut adalah sketsa menunjukkan cara yang mungkin untuk melakukannya.

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
Ini luar biasa, saya harap saya mengerti, saya merasa seperti murid Merlin saat ini :) Tidak yakin mengapa zigZag dihapus diMouseDrag? Saya kira kita tidak bisa membaca kode melalui obrolan video menggunakan pengkodean rekan Codepens atau yang serupa? - person James; 26.01.2021
comment
Saya mengalami sesuatu pada codepen tetapi saya berantakan dan ada titik acak tanpa Zig atau Zag codepen.io /limitedunlimited/pen/BaLgjjj - person James; 26.01.2021