ลบข้อความที่อัปเดตโดยใช้ไลบรารี Fabricjs Canvas

การเพิ่มองค์ประกอบข้อความ

function add_text() {   
    var myText = new fabric.Text(text,
    {
        fontSize: size,
        fontFamily: fm,
        strokeStyle: sc,
        fill: fc,
        left: myCanvas.getWidth()/2,
        top: myCanvas.getHeight()/2
    });

    myCanvas.add(myText);
}

การอัปเดตข้อความและขนาด

function chng_txt() {
    var obj = myCanvas.getActiveObject();
    var fm = document.getElementById('up_text').value;
    obj.setText(fm);
    myCanvas.add(obj);
    myCanvas.renderALL();
}

function chng_fs() {
    var obj = myCanvas.getActiveObject();
    var fs = document.getElementById('up_size').value;
    obj.setFontsize(fs);
    myCanvas.add(obj);
    myCanvas.renderALL();
}

การลบองค์ประกอบข้อความ

function rmv_txt() {
    var obj = myCanvas.getActiveObject();
    myCanvas.remove(obj);
}

ปัญหาของฉันคือ

ว่าฉันสามารถเพิ่มข้อความและอัปเดตข้อความได้
แต่ฉันไม่สามารถลบองค์ประกอบข้อความที่อัปเดตแล้วได้


person Thilakraj    schedule 29.11.2012    source แหล่งที่มา


คำตอบ (1)


สิ่งที่เกิดขึ้นจริงคือคุณกำลังเพิ่มวัตถุอื่นไว้ด้านบน นั่นคือมีวัตถุเดียวกันสองชิ้นวางทับกัน และเมื่อคุณลบมัน จะเป็นการลบเฉพาะวัตถุที่ใช้งานอยู่เท่านั้น

สิ่งที่คุณต้องทำคือลบบรรทัด myCanvas.add(obj); ออกเมื่อคุณอัปเดตข้อความ ดังนั้นรหัสของคุณจะมีลักษณะเช่นนี้

function chng_fs() {
    var obj = myCanvas.getActiveObject();
    var fs = document.getElementById('up_size').value;
    obj.setFontsize(fs);
    myCanvas.renderAll();
}

อีกประการหนึ่ง เป็นการดีกว่าเสมอที่จะเรนเดอร์แคนวาสเมื่อคุณทำการเปลี่ยนแปลงใด ๆ รวม renderAll() หลังจากเพิ่มและลบอ็อบเจ็กต์ถึงแม้ว่ามันจะทำงานได้ดีและไม่ใช่ "renderALL" แต่ควรเป็น "renderAll" ฉันคิดว่าคุณ โปรดทราบว่าเป็นเพียงการพิมพ์ผิดขณะโพสต์ ไม่เช่นนั้นคุณจะไม่เห็นคุณสมบัติข้อความเปลี่ยนแปลง

person Suchan Dongol    schedule 29.11.2012