Question

在透明画布中制作线条图并不是很难，但我不明白它在Fabric中是如何做到的。例如，我得到了这一行：

var L = new fabric.Line([50, 100, 200, 200], {
    left: 170,
    top: 150,
    stroke: 'red'
})

我需要它的一端开始持续到下一点（就像画铅笔一样）。我知道有一个功能＆＃39; animate＆＃39; ，但是

L.animate('left', 50, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000
});

我的行只更改其左上角坐标，而不是自行更改

Answer 1

您需要将animate属性作为对象传递给第一个参数

{
  x2: 200,
  y2: 200
}

<强> 样本

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中为线条绘制设置动画

1 个答案: