เส้นทาง ZigZag บนMouseDrag ด้วย paper.js

สวัสดี ฉันกำลังพยายามสร้างเส้นทางซิกแซกโดยใช้ฟังก์ชัน onMouseDrag ของ Path.js แต่กลับกลายเป็นเรื่องยุ่งวุ่นวายเล็กน้อย +NqjVWWwDBTn /f4oG6ilLTPq0VkXZ1l4XCEV17rilqyHOVZWis02I8tcxTv9i/laGytJoYBVktGuJWU1EzB9cGtwzScK8Yhko0tG4FZvKIDwBJ8OhdGtGss8971xzdqd8JTPNT3SZTTj1chi6uXFhtSwEPCSzJoN/G g24LhuTXlHzjp+11M/PzbhDQwWB8eZ+DrMR5e51R9MQDEZrjCuuAj/h91x8y5VGYa9CCxBryBeYUx0p63hCVYgBCTwNrQv3KtBOsBnB0fhbprKYIXKYi7ANi2Os8jIfaSfBuV+iGqCdLPt/gA =" rel="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
เยี่ยมมาก ฉันหวังว่าฉันจะเข้าใจ ตอนนี้ฉันรู้สึกเหมือนเป็นเด็กฝึกงานของ Merlin :) ไม่แน่ใจว่าทำไม zigZag จึงถูกลบออก onMouseDrag? ฉันไม่คิดว่าเราจะใช้โค้ดผ่านวิดีโอแชทโดยใช้ Codepens peer coding หรืออะไรที่คล้ายกันได้ - person James; 26.01.2021
comment
ฉันได้รับสิ่งที่เกิดขึ้น codepen ut ti มันยุ่งเหยิงและมีคะแนนสุ่มโดยไม่มี Zigs หรือ Zags codepen.io /limitedunlimited/pen/BaLgjjj - person James; 26.01.2021