Flex4 画图

skinClass中绘制多边形使用Path标签，把绘制路径放在data属性里。

如：<s:Path data="M0 0L10 10Z"/>

 

在编写绘制路径时，会用到一些控制关链字，这是必须了解的。

M(x,y)：移动到点(x,y)。

Z：结束并关闭路径（路径最后的点会画一条直线到路径起启点）。

L(x,y)：画一条直线到点(x,y)（一般和M一起使用，见下面例子）。

C(x1,y1,x,y,x2,y2)：从(x1,y1)画一条弧线到(x2,y2)，(x,y)为弧度控制点（|x1-x|=弧y轴半径，|y-y2|=弧x轴半径，当弧y轴半径=弧x轴半径时，此弧为圆弧）。

 

以下是一个简单的例子，绘制的都是一些基础图形，复杂图形也都是由基础图形构成的：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>[HostComponent("spark.components.SkinnableContainer")]</fx:Metadata><fx:Script>
<![CDATA[
import mx.graphics.SolidColorStroke;
[Bindable]
private var stroke:SolidColorStroke = new SolidColorStroke(0xfff000, 2);
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:HGroup gap="50">
<s:VGroup>
<!--横线-->
<s:Path data="M0 0L60 0Z" stroke="{stroke}"/>
<!--竖线-->
<s:Path data="M0 0L0 60Z" stroke="{stroke}"/>
<!--右45度斜线-->
<s:Path data="M0 0L60 60Z" stroke="{stroke}"/>
<!--左45度斜线-->
<s:Path data="M0 60L60 0Z" stroke="{stroke}"/>
<!--虚线-->
<s:Path data="M0 0L10 0Z M20 0L30 0Z M40 0L50 0Z M60 0L70 0Z" stroke="{stroke}"/>
<!--1/4圆弧-->
<s:Path data="C0 0 0 60 60 60" stroke="{stroke}"/>
</s:VGroup>
<s:VGroup>
<!--正方形-->
<s:Path data="M0 0 60 0 60 60 0 60Z" stroke="{stroke}"/>
<!--三角形-->
<s:Path data="M0 0 60 0 30 40Z" stroke="{stroke}"/>
<!--半圆形-->
<s:Path data="C0 0 0 30 30 30 30 30 60 30 60 0Z" stroke="{stroke}"/>
<!--叶形-->
<s:Path data="Q0 0 0 30 30 30 30 30 60 30 60 0 60 -30 30 -30 0 -30 0 0" stroke="{stroke}"/>
<!--五角星-->
<s:Path data="M31.0376 1.17676L40.3076 20.9272 61.0376 24.0947 46.0376 39.4683 49.5786 61.1768 31.0376 50.9272 12.4966 61.1768 16.0376 39.4683 1.0376 24.0947 21.7676 20.9272 31.0376 1.17676Z" stroke="{stroke}"/>
</s:VGroup>
</s:HGroup>
</s:Skin>

较果如下：

<?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" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<!-- 画一个椭圆或圆 -->
	<s:Ellipse width="120" height="100" x="52" y="115">
		<s:fill>
			<s:SolidColor color="#ff0000" />
		</s:fill>
	</s:Ellipse>
	
	<!-- 画一个红色的椭圆或圆，描黑色的边 -->
	<s:Ellipse width="120" height="100" x="48" y="224">
		<s:fill>
			<s:SolidColor color="#ff0000" />
		</s:fill>
		<s:stroke> 
			<s:SolidColorStroke color="0x000000" weight="2"/> 
		</s:stroke>
	</s:Ellipse>
	
	<!-- 画一个空心的椭圆或圆，有黑色的边 -->
	<s:Ellipse width="120" height="100" x="208" y="111">
		<s:stroke> 
			<s:SolidColorStroke color="0x000000" weight="1"/> 
		</s:stroke>
	</s:Ellipse>
	
	<!-- 画一个长方形或正方形 -->
	<s:Rect width="100" height="80" x="432" y="134">
		<s:fill>
			<s:SolidColor color="#ff0000" />
		</s:fill>	
	</s:Rect>
	
	<!-- 画一个红色的直线 -->
	<s:Line width="238" x="200" y="80" >
		<s:stroke> 
			<s:SolidColorStroke color="0xff0000" weight="2"/> 
		</s:stroke> 
	</s:Line>
	
	<!-- 画一个颜色渐变的直线 -->
	<s:Line width="238" x="200" y="100" >
		<s:stroke>
			<s:LinearGradientStroke weight="2">
				<s:GradientEntry color="#ff0000"/>
				<s:GradientEntry color="#ffff00"/>
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Line>
	
</s:Application>