如何在fabricjs中制作楔形

Question

我想创建一个楔形/扇形的形状，从0°的角度开始，并在一秒钟内动画到全角度360°（所以要将下面的形状设置为一个完整的圆形）。

我无法在图书馆找到一个形状来做这个，所以我猜我将不得不自己制作这个形状。什么是最好的方法来解决这个问题？

我有一个楔形（如上图所示），我在插图画家中制作并具有相关的路径细节：

<path d="M1951,1818c0-429.2-4-1065.3-4-1500c89,0,176.3,7.8,261,22.6C2131,783,1951,1818,1951,1818z"/>

..那么我必须手动修改此路径中的立方贝塞尔曲线值吗？

我是画布的新手，所以我不知道最好的方法是什么。

Answer 1

为扇区/圆圈设置动画

使用clippath仅显示圆圈的一部分，逐渐使clippath变小，显示其余部分。

var endAngle = 0;
var circle = new fabric.Circle({
    ...
    clipTo: function (ctx) {
        // the center is relative to the object - hence 0, 0 instead of 100, 100
        ctx.moveTo(0, 0);
        // the endAngle is the global variable we animate from 0 to 360 degrees (2 * PI)
        ctx.arc(0, 0, 50, 0, endAngle);
    }
});

// changing the clippath
(function animate() {
    fabric.util.animate({
        startValue: 0,
        endValue: 2 * Math.PI,
        duration: 1000,
        onChange: function (value) {
            endAngle = value;
            canvas.renderAll();
        }
    });
})();

小提琴 - http://jsfiddle.net/nyjzs32p/