如何在 fabricjs 中制作楔形

Question

我想创建一个 wedge/sector 形状，它从 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 的新手，所以我不知道解决这个问题的最佳方法是什么。

Answer 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();
        }
    });
})();

Fiddle - http://jsfiddle.net/nyjzs32p/

如何在 fabricjs 中制作楔形

How to make a wedge shape in fabricjs

html5-canvas

fabricjs

动画扇区/圆圈