<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="setDrawingState()">
<fx:Script>
<![CDATA[
import mx.graphics.IFill;
import mx.graphics.IStroke;
private function setMode(event:MouseEvent):void
{
switch (event.currentTarget)
{
case line:
currentState = "lineMode";
break;
case rect:
currentState = "rectMode";
break;
case ellipse:
currentState = "ellipseMode";
break;
case path:
currentState = "pathMode";
break;
}
}
private function setDrawingState():void
{
var newStroke:IStroke;
var newFill:IFill;
if (fillCB.selected)
{
if (fillColor.selectedColor == fillGradientColor.selectedColor)
newFill = new SolidColor(fillColor.selectedColor);
else
{
newFill = new LinearGradient();
LinearGradient(newFill).entries = [
new GradientEntry(fillColor.selectedColor),
new GradientEntry(fillGradientColor.selectedColor)
];
}
}
if (strokeCB.selected)
newStroke = new SolidColorStroke(strokeColor.selectedColor);
sampleRect.stroke = newStroke;
sampleRect.fill = newFill;
var drawingChangeEvent:DrawingStateChangeEvent =
new DrawingStateChangeEvent("drawingStateChange",
newStroke, newFill);
dispatchEvent(drawingChangeEvent);
}
]]>
</fx:Script>
<fx:Metadata>
[Event("drawingStateChange",
type="components.DrawingStateChangeEvent")]
</fx:Metadata>
<fx:Declarations>
<s:SolidColorStroke id="iconStroke" color="black" weight="2"/>
</fx:Declarations>
<s:states>
<s:State name="lineMode"/>
<s:State name="rectMode"/>
<s:State name="ellipseMode"/>
<s:State name="pathMode"/>
</s:states>
<s:Rect left="0" top="0" right="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x404040"/>
<s:GradientEntry color="0xafafaf"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:VGroup horizontalCenter="0" top="10">
<s:Group id="line" width="40" height="40" click="setMode(event)">
<s:Rect left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="black" weight.lineMode="2"/>
</s:stroke>
<s:fill>
<s:SolidColor color="white" color.lineMode="gray"/>
</s:fill>
</s:Rect>
<s:Line xFrom="5" yFrom="5" xTo="35" yTo="35" stroke="{iconStroke}"/>
</s:Group>
<s:Group id="rect" width="40" height="40" click="setMode(event)">
<s:Rect left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="black" weight.rectMode="2"/>
</s:stroke>
<s:fill>
<s:SolidColor color="white" color.rectMode="gray"/>
</s:fill>
</s:Rect>
<s:Rect x="5" y="5" width="30" height="30" stroke="{iconStroke}"/>
</s:Group>
<s:Group id="ellipse" width="40" height="40" click="setMode(event)">
<s:Rect left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="black" weight.ellipseMode="2"/>
</s:stroke>
<s:fill>
<s:SolidColor color="white" color.ellipseMode="gray"/>
</s:fill>
</s:Rect>
<s:Ellipse x="5" y="5" width="30" height="30" stroke="{iconStroke}"/>
</s:Group>
<s:Group id="path" width="40" height="40" click="setMode(event)">
<s:Rect left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="black" weight.pathMode="2"/>
</s:stroke>
<s:fill>
<s:SolidColor color="white" color.pathMode="gray"/>
</s:fill>
</s:Rect>
<s:Path stroke="{iconStroke}"
data="M 5 5 L 7 11 L 11 9 L 13 5 L 14 7 L 21 20 L 19 25 L 25 24 L 35 35"/>
</s:Group>
</s:VGroup>
<s:VGroup bottom="10">
<s:CheckBox fontSize="9" label="Stroke" id="strokeCB" selected="true"
change="setDrawingState()"/>
<mx:ColorPicker id="strokeColor" change="setDrawingState()"
width="100%" selectedColor="0xff0000"/>
<s:Rect id="sampleRect" x="10" width="100%" height="20"/>
<s:HGroup enabled="{fillCB.selected}">
<mx:ColorPicker id="fillColor" change="setDrawingState()"
selectedColor="0xffffff"/>
<mx:ColorPicker id="fillGradientColor" change="setDrawingState()"
selectedColor="0x0"/>
</s:HGroup>
<s:CheckBox id="fillCB" label="Fill" fontSize="9" change="setDrawingState()"/>
</s:VGroup>
</s:Group>