以编程方式更新fabricjs itext的问题

nnsrf1az 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(468)

我已经在这个问题上纠缠了几个小时了，我看不出任何明显的原因来解释为什么我不能做到这一点。
我正在使用fabricjs创建一个可编辑的画布。我目前正在添加文本功能，因此当用户单击工具图标，然后单击画布时，它将放置一个带有占位符文本的itext对象：“在此处键入…”。
我在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

来源：https://stackoverflow.com/questions/68315797/issue-with-updating-fabricjs-itext-programmatically

1条答案

按热度按时间

oipij1gg1#

从你的描述中，我不清楚你想做什么，或者你为什么在这里使用“改变”事件，所以我可能误解了你的要求。
可以在创建的示例时设置默认文本 iText . 您还可以选择默认文本，以便在用户开始键入时替换该默认文本。您可以使用其他事件（例如“编辑：退出”）来检查用户输入的文本，并在以下情况下恢复默认文本： iText 示例为空等。
下面是我的“工具”类 Package 器中用于 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);
  }

赞(0）回复(0）举报 2021-09-23

我来回答

以编程方式更新fabricjs itext的问题

1条答案

相关问题

热门标签

最新问答