使用fabricjs帆布庫中刪除更新的案文

Question

添加文本元素

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); 
} 

我的問題是

我可以添加文本和更新文本。
但我無法刪除已更新的文本元素。

Answer 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」，我想你知道這一點，只是在發佈錯誤時發佈錯誤，否則你不會看到文本屬性發生變化。