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

问题描述

我已经被这个问题困住了几个小时，我看不出任何明显的原因来说明为什么我无法做到这一点。

我正在使用 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();
        });

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

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

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

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

解决方法

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

您可以在创建 l1 <- list(1,2,3,4,5,6) l2 <- list(7,8,9,10,11,12) Map( function(x,y) outer(unlist(x),unlist(y),`+`) / 2,split(l1,ceiling(seq_along(l1) / 3)),split(l2,ceiling(seq_along(l2) / 3)) ) 实例时设置默认文本。您还可以选择默认文本，以便在用户开始键入时替换该默认文本。您可以使用其他事件（例如“editing:exited”）来处理检查用户输入的文本并在 iText 实例为空等情况下恢复默认文本。

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

iText

fabricjs fabricjs2 javascript