如何在Fabric中为画线设置动画 [英] How to animate line-drawing in 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屋！