FabricJS - почему после обновления текста внутри группы ширина группы не регулируется автоматически - PullRequest
Новая
       35

FabricJS - почему после обновления текста внутри группы ширина группы не регулируется автоматически

1 голос
/ 06 октября 2019

Видимое поведение

У меня проблема с обновлением элементов холста внутри группы после инициализации. Я создал базовое приложение, которое при инициализации создает группу, содержащую несколько элементов: значок шрифта (текстовый объект), заголовок, описание и прямоугольник, чтобы создать границу для группы.

Есть ли способ решить эту проблемупроблема, которая не требует от меня удаления и повторного добавления группы обратно на холст? после прочтения документации faricjs canvas.renderAll должно быть достаточно, чего мне не хватает?

Ожидаемое поведение

Объекту группы, который отображается в DOM, необходимо отрегулировать его ширину в соответствии сна новую ширину текстового объекта в DOM. По сути, заново визуализируйте этот отдельный групповой объект, не вызывая полного повторного рендеринга всех других объектов на холсте.

Выпуск Воспроизведение Демо

Мне удалось воспроизвестипроблема здесь: http://jsfiddle.net/almogKashany/k6f758nm/

Использование setTimeout Я обновляю заголовок группы, но заголовок группы не обновляется (даже после вызова group.setCoords или canvas.renderAll)

РЕШЕНИЕ

Благодаря @ Durga

http://jsfiddle.net/gyfxckzp/

1 Ответ

1 голос
/ 07 октября 2019

Вызвать addWithUpdate после изменения ширины прямоугольника или текстового значения, чтобы он пересчитал размерность группы.

DEMO 

var canvas = new fabric.StaticCanvas('c', {
  renderOnAddRemove: false
});

var leftBoxIconWidth = 70;
var placeholderForIcon = new fabric.Text('ICON', {
  fontSize: 20,
  fontWeight: 400,
  fontFamily: 'Roboto-Medium',
  left: 10,
  top: 20,
  originX: 'left',
  lineHeight: '1',
  width: 50,
  height: 30,
  backgroundColor: 'brown'
});

var title = new fabric.Text('', {
  fontSize: 20,
  fontWeight: 400,
  fontFamily: 'Roboto-Medium',
  left: leftBoxIconWidth,
  top: 5,
  originX: 'left',
  lineHeight: '1',
});

var description = new fabric.Text('', {
  fontSize: 20,
  fontWeight: 400,
  fontFamily: 'Roboto-Medium',
  left: leftBoxIconWidth,
  top: 25,
  originX: 'left',
  lineHeight: '1',
});

title.set({
  text: 'init title'
});
description.set({
  text: 'init description'
});

var groupRect = new fabric.Rect({
  left: 0,
  top: 0,
  width: Math.max(title.width, description.width) + leftBoxIconWidth, // 70 is placeholder for icon
  height: 70,
  strokeWidth: 3,
  stroke: '#f44336',
  fill: '#999',
  originX: 'left',
  originY: 'top',
  rx: 7,
  ry: 7,
})
let card = new fabric.Group([groupRect, title, description, placeholderForIcon]);

canvas.add(card);
canvas.requestRenderAll();

setTimeout(function() {
  title.set({
    text: 'change title after first render and more a lot text text text text'
  });
  groupRect.set({
    width: Math.max(title.width, description.width) + leftBoxIconWidth
  })
  card.addWithUpdate();
  // here missing how to update group/rect inside group width after title changed
  // to update canvas well
  canvas.requestRenderAll();
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
...