如何在fabricjs中制作楔形答案

【问题标题】：How to make a wedge shape in fabricjs如何在fabricjs中制作楔形
【发布时间】：2015-11-20 22:22:50
【问题描述】：

我想创建一个楔形/扇形形状，它从 0° 角开始，并在一秒钟内动画到 360° 的全角（因此将下面的形状动画化为一个完整的圆）。

我在库中找不到执行此操作的形状，所以我猜我将不得不自己制作形状。解决这个问题的最佳方法是什么？

我有一个在 illustrator 中制作的楔形（如上图），并有相关的路径详细信息：

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

..那么我是否必须手动修改此路径中的三次贝塞尔值？

我是 canvas 新手，所以我不知道解决这个问题的最佳方法是什么。

【问题讨论】：

标签： html5-canvas fabricjs

【解决方案1】：

为扇区/圆设置动画

使用剪辑路径仅显示圆圈的一部分，并逐渐缩小剪辑路径以显示其余部分。

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/

【讨论】：