Анимация Lottie на холсте fabricjs

Можно ли загрузить анимацию Lottie на холст fabricjs?

Я пробовал следующие образцы

    bodymovin.loadAnimation({
          wrapper: animateElement,       // div element
          loop: true,
          animType: 'canvas',            // fabricjs canvas
          animationData: dataValue,      // AE json
          rendererSettings: {
             scaleMode: 'noScale',
             clearCanvas: true, 
             progressiveLoad: false, 
             hideOnTransparent: true,
           }
       });
canvas.add(bodymovin);
canvas.renderAll();

Я не могу добавить анимацию в ткань js canvas. если кто-то преодолеет эту проблему, любезно прокомментируйте ее


lottie fabricjs bodymovin
person Balasubramani Samiyappan    schedule 31.08.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Возможно, я опоздал с ответом на этот вопрос, но для тех, кто ищет, эта ручка может дать вам несколько указателей: https://codepen.io/shkaper/pen/oEKEgG

Идея здесь, прежде всего, состоит в том, чтобы расширить класс fabric.Image, переопределив его внутренний метод рендеринга, чтобы отобразить содержимое произвольного холста, который вы сами предоставляете:

fabric.AEAnimation = fabric.util.createClass(fabric.Image, {
  drawCacheOnCanvas: function(ctx) {
    ctx.drawImage(this._AECanvas, -this.width / 2, -this.height / 2);
  },
})

Вы можете сделать этот холст аргументом конструктора, например

initialize: function (AECanvas, options) {
  options = options || {}
  this.callSuper('initialize', AECanvas, options)
  this._AECanvas = AECanvas
},

Затем вам просто нужно использовать средство визуализации холста Lottie, чтобы нарисовать анимацию на холсте и передать ее вашему новому объекту fabric.AEAnimation.

person shkaper    schedule 09.11.2018

arrow_upward
0
arrow_downward

Я предполагаю, что это так, объединив ваш код с чем-то похожим на https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d. В зависимости от вашего сценария вам может сойти с рук что-то вроде http://fabricjs.com/interaction-with-objects-outside-canvas

person Filipe Silva    schedule 10.09.2018