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

Posted 2023-03-25

【中文标题】在fabric js中擦除iText时显示光标线代替擦除的字符

【英文标题】：Display cursor line in place of erased character when iText erase in fabric js

【发布时间】：2019-06-06 00:07:02

【问题描述】：

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

我无法在小提琴中生成此问题所以请检查 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);

此问题是由文本缩放引起的。 该解决方案也适用于小提琴。但如果画布处于缩小模式，则问题将重新生成。 我为此附上了一个小提琴：

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

【问题讨论】：

我不明白你想通过 gif 找出什么问题。你能解释更多吗？

当 Itext 擦除时，有一些可见的行代替擦除的字符，这是问题。但是当我们取消选择 itext 对象时它会删除。通过鼠标或画布缩放缩放 itext 时会产生此问题。

【参考方案1】：

当 IText 光标移动时，fabric 调用text._clearTextArea() 以清除绘制光标的画布。一种可能的解决方案是通过修补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"  ></canvas>

这看起来有点老套，但它确实可以解决问题，因为没有更好的解决方案。更好的方法是从 fabric v2 反向移植 IText - 这个错误已修复。