以编程方式更新 FabricJS iText 的问题答案

【问题标题】：Issue with updating FabricJS iText programmatically以编程方式更新 FabricJS iText 的问题
【发布时间】：2021-09-19 18:09:33
【问题描述】：

我已经在这个问题上停留了几个小时，我看不出有什么明显的原因说明我为什么不能这样做。

我正在使用 FabricJS 创建一个可编辑的画布。我目前正在添加文本功能，因此当用户单击工具图标然后单击画布时，它将放置一个带有占位符文本的 iText 对象：'Type here...'。

我在 Fabric 对象上添加了一个名为 placeholderPresent 的属性。然后我在画布上添加了一个监听器，如下所示：

this.canvas.on('text:changed', (data) => {

            let textObject = data.target;

            textObject.set('dirty', true);

            // If the user has just created this text and is now writing in it, remove the placeholder
            if(textObject.placeholderPresent) {
                textObject.set('text', textObject.text.replace('Type here...', ""));
                textObject.set('dirty', true);
                textObject.set('placeholderPresent', false);
            }

            this.canvas.renderAll();
        });

这样做的想法是，当用户在放置文本框后第一次键入时，它会立即删除占位符文本。

我遇到的问题是，当用户输入他们的第一个字符时，这确实有效，但是当他们输入第二个字符时，它会将“Type here...”添加回当前在 iText 对象中的文本结尾。

我的猜测是由于某种缓存，但我尝试在多个地方将 'dirty' 设置为 true 以强制 FabricJS 重新渲染，但这仍然不起作用。

关于可能导致这种情况的任何想法？提前致谢。

【问题讨论】：

标签： javascript fabricjs fabricjs2

【解决方案1】：

根据您的描述，我不清楚您要做什么或为什么在这里使用“更改”事件，所以我可能误解了您的要求。

您可以在创建iText 的实例时设置默认文本。您还可以选择默认文本，以便在用户开始键入时替换默认文本。您可以使用其他事件（例如“editing:exited”）来处理检查用户输入的文本并在 iText 实例为空时恢复默认文本等。

下面是我的 iText 的“工具”类包装器中的一个方法——也许它会有所帮助。

onMouseDown(evt) {
    this.owner.toolActionBegin()
    this.isMouseDown = true
    this.startPt = this.canvas.getPointer(evt.e);

    this.object = new fabric.IText("New text",
      {
        left: this.startPt.x,
        top: this.startPt.y,
        fill: this.owner.textColor,
        selectable: true,
        fontFamily: 'arial',
        fontSize: this.owner.fontSize,
        editable: true,
        selectionBackgroundColor: "rgb(255,255,255)",
        perPixelTargetFind: false,
        hasBorders: true,
        hasControls: true,
      });

    
      this.object.setControlsVisibility({
        tl: true,
        tr: true,
        br: true,
        bl: true,
        ml: false,
        mt: false,
        mr: false,
        mb: false,
        mtr: true
      })

    this.canvas.add(this.object)
    this.canvas.on("mouse:up", this.onMouseUp);
    this.canvas.on("editing:exited", this.onExitEditing);
  }

【讨论】：