FLEX4 中SKINCLASS使用PATH绘制多边形

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
  >