首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

FLEX4 中SKINCLASS运用PATH绘制多边形

2012-11-04 
FLEX4 中SKINCLASS使用PATH绘制多边形skinClass中绘制多边形使用Path标签,把绘制路径放在data属性里。如:s

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>

?

?

?

热点排行