Отображение строки курсора вместо стертого символа при стирании iText в ткани js - PullRequest
Новая
       36

Отображение строки курсора вместо стертого символа при стирании iText в ткани js

0 голосов
/ 11 января 2019

Я использую Fabric JS версии 1.7.22. Я работаю над одним проектом, в который мне нужно добавить текст и редактировать. Когда я добавляю новый текст в холст, пишу текст и стираю его. Он показывает мне старую линию курсора вместо стертого символа,

Я не могу создать эту проблему в скрипте, поэтому, пожалуйста, проверьте GIF. Я не знаю, где я не прав. Пожалуйста, помогите мне.

enter image description here

Мой код, добавленный в 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/

1 Ответ

0 голосов
/ 13 января 2019

Когда курсор IText перемещается, ткань вызывает 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>

Это выглядит несколько странно, но это помогает, из-за отсутствия лучшего решения. Лучшим способом было бы перенести IText с фабрики v2 - эта ошибка там исправлена.

...