Add Start and End angle to circle. #1675
Conversation
Add option to circle for start and end angle, to draw an ARC. in radians, not in degree to avoid writing a setter and getter that does the conversion. Internally is better radians i think.
Added start and end Angle to tests.
fixed typo.
Code styles error fix
|
Looks great @asturur, thanks! Would be nice to add some visual-functional tests for this feature. For example, under miscellaneous http://fabricjs.com/test/ |
…gle-,-endAngle Add Start and End angle to circle.
|
Ok, i'll try, Please consider my question in #1671, about FillRule, i would like to go Basically FillRule for path is a FillRule in SVG - PATH FillRule for everything else in fabric is a globalcompoisteoperation We should divide in 2 different properties. 2014-09-18 15:04 GMT+02:00 Juriy Zaytsev notifications@github.com:
|
That would make sense, sure. And we can add ellipses with different angles to a test page as well! |
|
i'll finish test on those polygons and then check the fabricjs.com 2014-09-19 12:35 GMT+02:00 Juriy Zaytsev notifications@github.com:
|
|
@asturur - what is the logic of keeping the original bounding box and how could this be changed? I am trying to use the mouse:over event for a semi-circle but it triggers on the half of the circle that is not drawn which is confusing to a user. As another example, if I add a semi-circle to the group along with other objects and access group.width in order to calculate the group center point, the undrawn part of the circle is included so the center point is inaccurate. |
|
This startAngle and endAngle are not complete. I think that writing a specific method for get nonTrasnformedDimensions should be enough. |
|
Also maybe giving an option to include the center point and making a circle sector may be another idea? |
|
OK, thanks for the quick reply. Should this be moved to a new issue? Might be relevant: https://mathoverflow.net/questions/93659/find-the-bounding-box-of-a-circle-segment |
|
We have 2 ways to find the bbox, already embedded in fabricJS. |
|
i see how including the center in the segment can be usefull to create pie charts without starting from SVGs ( i also imagine that positioning the slices is difficult ) |
|
I implemented a draft algorithm which I think calculates the width and height of the arc correctly, which I use to set the width/height properties. However, the bounding box location (from getBoundingRect()) is not positioned correctly (see image) and the arc no longer triggers a mouseover event. This arc was drawn with originX = originY = 'center'.
|
Add option to circle for start and end angle, to draw an ARC.
in radiants, not in degree to avoid writing a setter and getter that does the conversion.
Internally is better radiants i think.
as per request of issue #1612
I modified the render, the initialize method, toObject and toSvg methods.
Did i forget something?
Bounding box is the original of the circle, i think it makes sense to leave how it is.
Canvas:
svg export
resulting svg