Fabric.js画布中的Lottie动画 [英] Lottie Animation in fabricjs canvas

问题描述

是否可以在 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画布中添加动画.如果有人克服了这个问题，请对此发表评论

I cant able to add the animation in the fabric js canvas. if any one overcome this issue kindly do comments on it

推荐答案

我可能来不及回答这个问题，但是对于其他任何人，这支笔可能会给您一些提示:

I might be late to answer this, but for anyone else looking, this pen could give you some pointers: https://codepen.io/shkaper/pen/oEKEgG

首先，这里的想法是扩展fabric.Image类，以覆盖其内部render方法来呈现您自己提供的任意画布的内容:

The idea here, first of all, is to extend fabric.Image class overriding its internal render method to render the contents of an arbitrary canvas that you yourself provide:

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

您可以将此画布设为构造函数参数，例如

You can make this canvas a constructor argument, e.g.

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

然后，您只需要使用lottie的画布渲染器在画布上绘制动画并将其传递到新的fabric.AEAnimation对象.

Then you'll just need to use lottie's canvas renderer to draw animation on a canvas and pass it to your new fabric.AEAnimation object.

这篇关于Fabric.js画布中的Lottie动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！