fabricjs - 在 fabric js 中删除 iText 时显示光标线代替删除的字符

Question

我正在使用 fabric js 版本 1.7.22我正在从事一个项目，我需要在其中添加文本并进行编辑。当我在 Canvas 中添加新的 iText 并编写一些文本并将其删除时。它显示旧的光标线代替已删除的字符，

我无法在 fiddle 中生成此问题所以请检查 GIF。我不知道我哪里错了。请帮助我。

我的itext添加代码是这样的:

var text = new fabric.IText('Example heading', {
        left: 10,
        top: 10,
        fontFamily: 'Roboto-Regular',
        angle: 0,
        fontSize: fontSize,
        fill: '#000000',
        fontWeight: '',
        charSpacing: 0,
        shadow: {
            "color": "#000000",
            "blur": 0,
            "offsetX": 0,
            "offsetY": 0,
            "affectStroke": false
        },
        hasRotatingPoint: true
    });
    canvas.add(text);

此问题是由于文本缩放引起的。该解决方案也适用于 fiddle 。但如果 Canvas 处于缩小模式，则问题将再次出现。我为此附加了一个 fiddle :

https://jsfiddle.net/Mark_1998/ro8gc3zh/5/

Answer 1

当 IText 光标移动时，fabric 调用 text._clearTextArea() 清除绘制光标的 Canvas 。一种可能的解决方案是通过修补 fabric.IText.prototype._clearTextArea() 方法稍微扩展此区域 - 足以在所有可能的情况下删除闪烁光标的痕迹:

fabric.IText.prototype._clearTextArea =  function(ctx) {
  // was 'this.width + 4'
  var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
  ctx.clearRect(-width / 2, -height / 2, width, height);
}

这是应用了补丁的示例:

fabric.IText.prototype._clearTextArea =  function(ctx) {
  var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
  ctx.clearRect(-width / 2, -height / 2, width, height);
}

var canvas = window._canvas = new fabric.Canvas('c');

var text = new fabric.IText('this is example text', {
  left: 20,
  top: 50,
  fill: 'red',
  scaleX: 0.5,
  fontFamily: 'verdana'
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.getActiveObject().enterEditing();
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<h1>
  Try to erase text from end
</h1>
<canvas id="c" width="300" height="150"></canvas>

这看起来有些 hacky，但由于缺乏更好的解决方案，它确实起到了作用。更好的方法是从 fabric v2 向后移植 IText - 此错误已在那里修复。