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”，我想你知道这一点，只是一个错误的错误发布，否则你不会看到文本属性发生变化。

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

1 个答案: