问题描述
是否可以在 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
推荐答案
我可能来不及回答这个问题,但是对于其他任何人,这支笔可能会给您一些提示: https://codepen.io/shkaper/pen/oEKEgG
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动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!