javascript - How to draw arc in Fabric.js - Stack Overflow

admin管理员组

文章数量:1344426

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°.

Is there a way to acplish 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.

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°.

Is there a way to acplish 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.

• javascript
• canvas
• fabricjs

Share Improve this question Follow edited Sep 25, 2014 at 11:13 kangax 39.2k1313 gold badges100100 silver badges135135 bronze badges asked Sep 22, 2014 at 17:19 JustinJustin 3,39533 gold badges1818 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

In latest version of FabricJS for circle were added startAngle and endAngle properties. https://github./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: ''
});

Example: http://jsfiddle/mmeqec89/

本文标签： javascriptHow to draw arc in FabricjsStack Overflow