如何在Fabric.js中绘制弧 [英] How to draw arc in Fabric.js

问题描述

我正在使用Fabric.js，我想在画布上绘制圆弧。我能找到的最接近的形状是 Circle 形状。当然，这只能使我绕成一个圆，而不能像跨度为45°或180°的弧一样。

I'm working with Fabric.js and I would like to draw arcs on canvas. The closest shape I can find is the Circle shape. This, of course, only enables me to make a circle and nothing like an arc spanning 45° or 180°.

有没有一种方法可以用Fabric.js完成此操作？如果不是，是否有办法获取基础上下文，然后创建弧并允许结构进行管理？保留Fabric.js提供的选择和缩放功能非常重要。

Is there a way to accomplish this with Fabric.js? If not, is there a way I can get the underlying context and then create the arc and allow fabric to manage it? It is important that I retain the selection and scaling capabilities that Fabric.js offers.

推荐答案

最新版本的用于循环的FabricJS是添加了 startAngle 和 endAngle 属性。
https://github.com/kangax/fabric.js/pull/1675

In latest version of FabricJS for circle were added startAngle and endAngle properties. https://github.com/kangax/fabric.js/pull/1675

var canvas = new fabric.Canvas('c');

var circle = new fabric.Circle({
    radius: 20,
    left: 100,
    top: 100,
    angle: 45,
    startAngle: 0,
    endAngle: Math.PI,
    stroke: '#000',
    strokeWidth: 3,
    fill: ''
});

示例：
http://jsfiddle.net/mmeqec89/

这篇关于如何在Fabric.js中绘制弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！