如何在Fabric中为画线设置动画 [英] How to animate line-drawing in Fabric
本文介绍了如何在Fabric中为画线设置动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
要在清晰的Canvas中为画线设置动画不是很困难,但是我不明白在Fabric中是如何做到的.例如,我得到了这一行:
It is not very hard to animate line-drawing in clear Canvas, but i don't understand how do it in Fabric . For example i got this line :
var L = new fabric.Line([50, 100, 200, 200], {
left: 170,
top: 150,
stroke: 'red'
})
,我需要它的结尾之一开始继续到下一点(就像用铅笔画线一样).我知道这里有一个'animate'函数,但是使用
and i need that one of its end started to continue till next point ( like a pencil drawing the line ). I know that there is a function 'animate' , but with
L.animate('left', 50, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000
});
我的行仅更改其左上角的坐标,而不更改其自身
my line only changes its top-left coordinates , not changing itself
推荐答案
您需要将animate属性作为对象传递给第一个参数
You need to pass the animate property as object in first argument
{
x2: 200,
y2: 200
}
演示
DEMO
var canvas = new fabric.Canvas('canvas');
var line = new fabric.Line([50,100,50,100],{
left: 170,
top: 150,
stroke: 'red'
});
canvas.add(line);
line.animate({
x2: 200,
y2: 200
}, {
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
line.setCoords();
},
duration: 3000
});
canvas{
border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>
这篇关于如何在Fabric中为画线设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文