Seen Behavior

I have an issue with updating canvas elements inside a group after initialization. I created a basic app that on initialization creates a group containing several elements: font icon(text object), title, description and rect in order to create a border for the group.

Is there any way to solve this problem that dosen't require me to remove and re add the group back to the canvas? after reading faricjs documentation canvas.renderAll should be enough what am i missing?

Expected Behavior

The Group object that is rendered to the DOM needs to adjust its width according to the new width of the text object in the DOM. Essentially re-render this individual group object without causing a full re-render of all the other objects in the canvas.

Issue Reproduction Demo

I was able to reproduce the issue here: /

Using setTimeout I update the title of the group but the title of the group does not update (even after calling group.setCoords or canvas.renderAll)

SOLUTION

Thanks to @Durga

/

Seen Behavior

I have an issue with updating canvas elements inside a group after initialization. I created a basic app that on initialization creates a group containing several elements: font icon(text object), title, description and rect in order to create a border for the group.

Is there any way to solve this problem that dosen't require me to remove and re add the group back to the canvas? after reading faricjs documentation canvas.renderAll should be enough what am i missing?

Expected Behavior

The Group object that is rendered to the DOM needs to adjust its width according to the new width of the text object in the DOM. Essentially re-render this individual group object without causing a full re-render of all the other objects in the canvas.

Issue Reproduction Demo

I was able to reproduce the issue here: http://jsfiddle/almogKashany/k6f758nm/

Using setTimeout I update the title of the group but the title of the group does not update (even after calling group.setCoords or canvas.renderAll)

SOLUTION

Thanks to @Durga

http://jsfiddle/gyfxckzp/

• javascript
• html
• css
• canvas
• fabricjs

Share Improve this question Follow edited Oct 7, 2019 at 12:05 almog kashany asked Oct 6, 2019 at 13:17 almog kashanyalmog kashany 7111 silver badge88 bronze badges 3

• Use addWithUpdate . jsfiddle/xbn4ducs – Durga Commented Oct 7, 2019 at 4:15
• @Durga also inside your fiddle, the width of the card doesn't change, you see the border stay shorter then title, how i can fix that ? – almog kashany Commented Oct 7, 2019 at 7:23
• Updated jsfiddle/gyfxckzp. – Durga Commented Oct 7, 2019 at 7:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Call addWithUpdate after changing width of rect or text value, so it will recalculate the group dimension.

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./ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>