Смещение ограничивающей рамки Fabric.js - PullRequest
Новая
       34

Смещение ограничивающей рамки Fabric.js

0 голосов
/ 07 марта 2019

Я создал анимацию с объектами в группе с fabric.js.Однако когда я добавляю группу на холст, положение ограничительной рамки группы смещается влево.Любые идеи о том, как я могу решить это?

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>

1 Ответ

1 голос
/ 07 марта 2019

Обновление группы с использованием addWithUpdate в onComplete событие анимация .

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>
...