CODEWITHSUNDEEP
javascriptcanvashtml5-canvasfabricjs
fitzmode
fitzmode

Reputation: 1066

Fabric.js offset bounding box issue

I've created an animation with objects within a group with fabric.js. However when I add the group to the canvas, the position of the bounding box of the group is offset to the left. Any ideas on how I can solve this?

enter image description here 

var canvas = new fabric.Canvas("canvas");
canvas.setWidth(554);
canvas.setHeight(312);

const rect = new fabric.Rect({
  width: 200,
  height: 50
})

const rect2 = new fabric.Rect({
  top: 50,
  width: 200,
  height: 50,
  fill: 'blue'
})

rect.animate({width: 300
             }, {
  duration: 300,
  onChange: canvas.renderAll.bind(canvas)
})

rect2.animate({width: 300}, {
  duration: 200,
  onChange: canvas.renderAll.bind(canvas)
})

const group  = new fabric.Group([rect, rect2], {
  top: 70,
  width: 300,
})

canvas.add(group)
canvas.setActiveObject(group)
canvas.renderAll()
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
  <canvas id="canvas" width="600" height="500" style="border:1px solid #ccc;z-index:99"></canvas>

Upvotes: 0

Views: 737

Answers (1)

Durga
Durga

Reputation: 15604

Update group using addWithUpdate in onComplete event of animation.

DEMO 

const canvas = new fabric.Canvas("canvas");
canvas.setWidth(554);
canvas.setHeight(312);

const rect = new fabric.Rect({
  width: 200,
  height: 50
})

const rect2 = new fabric.Rect({
  top: 50,
  width: 200,
  height: 50,
  fill: 'blue'
})

rect.animate({
  width: 300
}, {
  duration: 300,
  onChange: canvas.renderAll.bind(canvas),
  onComplete: () => {
    group.addWithUpdate();
  }
})

rect2.animate({
  width: 300
}, {
  duration: 200,
  onChange: canvas.renderAll.bind(canvas),
  onComplete: () => {
    group.addWithUpdate();
  }
})

const group = new fabric.Group([rect, rect2], {
  top: 70
})

canvas.add(group)
canvas.setActiveObject(group)
canvas.renderAll()
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<canvas id="canvas" width="600" height="500" style="border:1px solid #ccc;z-index:99"></canvas>

Upvotes: 1

Related Questions