如何用fabric.js画一条弧线？答案

【问题标题】：How to draw an arc with fabric.js?如何用fabric.js画一条弧线？
【发布时间】：2014-12-03 15:16:57
【问题描述】：

我想画一个圆弧，为此我使用了一个带有起点和终点角度的圆。但有些不对劲。这是我的代码：

    var circle = new fabric.Circle({
        radius: 30,
        left: 20,
        top: 20,
        fill: "rgba(0, 0, 0, 0)",
        stroke: 'black',
        startAngle: 0,
        endAngle: Math.PI
});
canvas.add(circle);

你可以看到（在 jsfiddle 上）它总是画一个完整的圆圈 — http://jsfiddle.net/tfn1772f/

怎么了？

【问题讨论】：

标签： javascript html fabricjs

【解决方案1】：

通过fabric.Path绘制弧线怎么样？试试这样的：

var arc1 = new fabric.Path("M 255 135 A 50 50 0 0 1 200 110", {
                stroke: 'black',
                fill: "white"
            });

另见：https://groups.google.com/forum/#!msg/fabricjs/fp19BLlqauw/a-smtqe5ms8J

您可以编写一个接受参数并生成路径的函数。看起来fabric在fabric.util.drawArc中也有一个静态函数，你可以使用：

http://fabricjs.com/docs/fabric.util.html#drawArc

【讨论】：

它不会改变任何东西。它改变了孔圆的角度。在这里查看：jsfiddle.net/mv5f4pnm。我想画这样的东西：tinyurl.com/ob4lyl8
似乎也不再适合我使用 Circle 了。您是否尝试过使用路径？将编辑答案以反映这一点。
编辑：我认为路径可行，但这不是最好的解决方案，还是？让这个版本为多种屏幕尺寸做好准备会非常复杂。
是否有理由需要使用fabricjs 来生成弧？ Canvas 有一个内置的方法来创建弧线。请参阅：jsfiddle.net/Ljc7bw9v 另外，请参阅groups.google.com/forum/#!msg/fabricjs/fp19BLlqauw/a-smtqe5ms8J。您可以添加一个接受参数并绘制弧线的函数（隐藏路径）。
是的，原因是我喜欢fabric处理动画的方式，但毕竟我认为我必须使用内置方法。