使用fabricjs画布库删除更新的文本答案

【问题标题】：remove an updated text by using fabricjs canvas library使用fabricjs画布库删除更新的文本
【发布时间】：2013-11-25 20:32:45
【问题描述】：

添加文本元素

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

我的问题是

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

【问题讨论】：

标签： canvas html5-canvas fabricjs

【解决方案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”，我想你知道这一点，只是发帖时的拼写错误，否则你不会看到 text 属性发生变化。

【讨论】：