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 !

回答1:

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.

回答2:

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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/5058051/draw-a-circular-arc-in-mxml-graphics

标签

apache-flex

graphics

flex4

mxml