close wedge stroke

10 views
Skip to first unread message

jwk

unread,
Dec 1, 2011, 8:27:13 PM12/1/11
to Axiis
Does anybody know how to make the stroke for a wedge complete back to
the center point?

I'm guessing the answer lies within EllipticalArc['closureType'] but I
can't figure out how to get that property set correctly for a wedge.

Click on one of the wedges in the following example to see what I
mean. Notice that the selection stroke only draws on one side of the
wedge and the arc rather than on both sides sides and the arc.

You will need the Flex4 Axiis SWC and Degrafa Flex4 SWC.

Thanks!
Jesse

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:axiis="http://www.axiis.org/2009"
xmlns:degrafa="http://www.degrafa.com/2007"
width="600" height="600"
>
<fx:Declarations>
<s:ArrayCollection id="data">
<fx:Object category="Gold" count="23"/>
<fx:Object category="Silver" count="28"/>
<fx:Object category="Bronze" count="21"/>
</s:ArrayCollection>
</fx:Declarations>
<axiis:DataCanvas id="dc" top="20" bottom="20" right="20" left="20"
horizontalCenter="0" verticalCenter="0" showDataTips="false">
<axiis:layouts>
<axiis:WedgeStackLayout id="wedgeGroup"
dataProvider="{data}"
innerRadiusRatio="0"
outerRadiusRatio="1"
angleGap="0"
labelField="category"
dataField="count"
fill="{wedgeFill}"
stroke="{wedgeStroke}"
width="{dc.width}"
height="{dc.height}"
showDataTips="false">
<axiis:axiisStates>
<axiis:AxiisState
enterStateEvent="selected"
exitStateEvent="unselected"
targets="{ [wedgeGroup.wedge , wedgeGroup.wedge , wedgeStroke,
wedgeStroke, wedgeStroke ] }"
properties="{['centerX', 'centerY', 'alpha', 'color',
'weight']}"
values="{[
wedgeGroup.width/2 + 10*Math.cos((wedgeGroup.wedge.startAngle
+ wedgeGroup.wedge.arc / 2) * Math.PI / 180) ,
wedgeGroup.width/2 + 10*Math.sin((wedgeGroup.wedge.startAngle
+ wedgeGroup.wedge.arc / 2) * Math.PI / 180) ,
.85,
getStyle('selectionColor'),
3
]}" />
</axiis:axiisStates>
</axiis:WedgeStackLayout>
</axiis:layouts>
<axiis:palettes>
<axiis:LayoutAutoPalette id="wedgePalette" colorFrom="0xD20000"
colorTo="0x0000BD" layout="{wedgeGroup}"/>
</axiis:palettes>
<axiis:fills>
<degrafa:RadialGradientFill id="wedgeFill" >
<degrafa:GradientStop color="{wedgePalette.currentColor}"
ratio="1" />
</degrafa:RadialGradientFill>
</axiis:fills>
<axiis:strokes>
<degrafa:SolidStroke id="wedgeStroke" alpha=".2" color="0x000000"
weight="1" />
</axiis:strokes>
</axiis:DataCanvas>
</s:Application>

Reply all
Reply to author
Forward
0 new messages