时间戳

首页 > 解决方案 > FabricJS - 为什么在更新组内的文本后，组宽度不会相应地自动调整其宽度

javascript - FabricJS - 为什么在更新组内的文本后，组宽度不会相应地自动调整其宽度

问题描述

看到的行为

我在初始化后更新组内的画布元素时遇到问题。我创建了一个基本应用程序，它在初始化时创建了一个包含几个元素的组：字体图标（文本对象）、标题、描述和矩形，以便为组创建边框。

有什么方法可以解决这个问题，不需要我删除并将组重新添加回画布？阅读 faricjs 文档后canvas.renderAll应该足够了我错过了什么？

预期行为

渲染到 DOM 的 Group 对象需要根据 DOM 中文本对象的新宽度来调整其宽度。本质上是重新渲染这个单独的组对象，而不会导致画布中所有其他对象的完全重新渲染。

问题再现演示

我能够在这里重现这个问题：http: //jsfiddle.net/almogKashany/k6f758nm/

使用setTimeoutI 更新组的标题，但组的标题没有更新（即使在调用group.setCoordsor之后canvas.renderAll）

解决方案

感谢@Durga

http://jsfiddle.net/gyfxckzp/

标签： javascripthtmlcsscanvasfabricjs

解决方案

更改矩形或文本值的宽度后调用addWithUpdate，因此它将重新计算组尺寸。

演示 

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>

推荐阅读