CODEWITHSUNDEEP
apache-flexgraphicsflex4mxml
fred august
fred august

Reputation: 1107

draw a circular arc in MXML Graphics

Is there a simple way to draw a circular arc in MXML graphics that doesn't involve beziers? Or should I create my own component?

thank you !

f

Upvotes: 2

Views: 3675

Answers (4)

Rene
Rene

Reputation: 29

<s:Ellipse height="16" width="16">
    <s:stroke>
        <s:SolidColorStroke color="0x000000" joints="square" caps="square"/>
    </s:stroke>
    <s:fill>
        <s:SolidColor color="0x000000"/>
    </s:fill>
</s:Ellipse>

Upvotes: 2

fred august
fred august

Reputation: 1107

I ended up creating my own mxml graphics component to draw arcs. I override Ellipse Spark primitive and use AS for the arc math - mostly copying this great post, which points to this code.

Upvotes: 3

Frank
Frank

Reputation: 800

Yes there is. If it makes sense to enclose the code for drawing in a seperate class is up to you and is a question of software arcitecture.

Drawing curves can you manage with the drawing api. check this out link

BR Frank

EDIT:20.02.2011 - 21:12 Another idea without beziers can be the math class. Here is a liitle example to draw a sine curve Link

Upvotes: 0

Taurayi
Taurayi

Reputation: 3207

You can draw curves using the Path class. You set its data property as a string containing alternating commands and numeric values that execute cursor placement and drawing operations. The commands are:

  • C - Draws a bezier curve.
  • H - Draws a horizontal line.
  • L - Draws a line.
  • M - Moves cursor.
  • Q - Draws a quadratic bezier curve.
  • V - Draws a vertical line.
  • Z - Closes path.

An example of how to use this with FXG is as follows:

<s:Path data="M 20 0
        C 50 0 50 35 20 35
        L 15 35 L 15 45
        L 0 32 L 15 19
        L 15 29 L 20 29
        C 44 29 44 6 20 6">
    <s:stroke>
        <s:SolidColorStroke color="0x000000" weight="1"/>
    </s:stroke> 
</s:Path>

You can find more infomation on it here:

http://help.adobe.com/en_US/flex/using/WS5B6A8436-0FF5-4029-8524-C7C1106C483D.html

Upvotes: 1

Related Questions