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

【问题标题】：Display cursor line in place of erased character when iText erase in fabric js在fabric js中擦除iText时显示光标线代替擦除的字符
【发布时间】：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 时会产生此问题。

标签： fabricjs erase

【解决方案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" width="300" height="150"></canvas>

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

【讨论】：