`

FLEX4 中SKINCLASS使用PATH绘制多边形

    博客分类:
  • Flex
阅读更多

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>

 

 

 

分享到:
评论

相关推荐

    flex4自定义组件皮肤

    - 如果在自定义皮肤中使用了MX组件,可能与Flex4的Spark组件不兼容。因此,描述中提到的“请自己把所有mx组件改成sp组件”,是为了确保在Flex4环境中正确运行。 6. **压缩包内容分析** - 压缩包中的"src"目录可能...

    FLEX4的皮肤skin

    在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...

    Flex 4 进度条的皮肤

    在Flex 4中,皮肤是界面组件外观的关键元素,可以自定义以满足特定设计需求。进度条是用户界面中常见的组件,用于表示任务的完成程度或加载状态。本文将深入探讨如何在Flex 4中创建和定制进度条的皮肤。 首先,我们...

    自定义ActionBar外观(flex4手机应用)

    3. **设置皮肤**:在自定义组件类中,使用 `skinClass` 属性指定你的自定义皮肤类。这样,当你实例化这个组件时,它就会使用你定义的皮肤。 4. **集成到应用**:在应用主类或布局中,将自定义的ActionBar组件引入,...

    Flex4的皮肤文档及demo

    在Flex4中,皮肤定制是UI设计的重要组成部分,它允许开发者根据需求自定义组件的外观和交互效果。本主题主要围绕`SparkSkin`类和`Skin`类展开,这两类在Flex4的皮肤定制中扮演着核心角色。 **SparkSkin介绍** `...

    经过修改皮肤的flex4滚动条。

    在Flex4中,用户界面组件的外观可以通过自定义皮肤来大幅度改变,这使得开发者能够创建具有独特视觉风格的应用程序。本主题将深入探讨如何修改Flex4滚动条的皮肤,以改变Scroller组件的外观。 滚动条在用户界面中起...

    Flex4 Spark皮肤

    在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的自定义。 #### 二、Spark Skin与Skin类的关系 在...

    flex4 为垂直滚动条VScrollBar换肤

    在Flex4中,开发者可以利用其强大的皮肤定制能力来改变应用程序的外观和感觉,从而提供更个性化的用户体验。本文将详细讲解如何为垂直滚动条VScrollBar进行换肤,以提升应用界面的美观度。 首先,我们需要理解Flex4...

    自定义的Alert-Flex4

    在Flex 4中,开发人员有时需要根据项目需求创建具有特定设计和功能的自定义组件。Alert组件是标准UI库中的一个常见元素,通常用于显示警告、确认或信息消息。然而,Flex 4的默认Alert组件可能无法满足所有设计和交互...

    Flex4皮肤资料

    根据提供的信息,本文将深入解析Flex4中皮肤(skin)的概念、SparkSkin的使用方法以及如何通过自定义Skin来改变Flex应用界面的外观。 ### Flex4中的皮肤概念 在Flex4中,皮肤(skin)是一种用于控制UI组件外观的...

    flex4 下拉框可以多选 CheckBoxTreeComboBox

    在IT行业中,Flex4是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIA)。它提供了强大的组件库,使得开发者能够创建交互性丰富的网页应用。本篇我们将聚焦于“flex4下拉框可以多选...

    Flex4开发的自定义输入框皮肤组件,代图标

    在Flex4中,开发者经常需要根据项目需求对标准UI组件进行自定义,以实现独特的界面效果和交互体验。本主题将深入探讨如何在Flex4的Spark主题下开发一个带有图标的自定义输入框皮肤组件,并实现圆角效果。首先,我们...

    应用flash制作flex样式

    SWF可以直接在Flex中使用,而SVG则可能需要转换为SWF或使用Flex支持的其他格式。 3. **创建Flex皮肤类**:在Flex项目中,为每个组件创建相应的皮肤类。这些类通常继承自Flex的基础皮肤类,并通过@SkinClass注解关联...

    flex4 样式

    在Flex4中,组件的外观(皮肤)与逻辑分离,这有助于提升代码的可维护性和可重用性。SkinClass是一种特殊的MXML文件,用于定义组件的视觉表现形式。 #### SkinClass 必须包含的要素 - **HostComponent元数据**:每...

    Flex4.6 带图标的TabNavigator的使用

    在Flex4.6中,我们可以使用MXML或者ActionScript来创建和配置`TabNavigator`。 以下是一个简单的MXML代码示例,展示了如何创建一个带有图标的`TabNavigator`: ```xml xmlns:s="library://ns.adobe....

    Flex help之Flex 皮肤

    3. **导出为SWF或SVG**:将设计导出为SWF(Shockwave Flash)或SVG(Scalable Vector Graphics)格式,以便在Flex项目中使用。 4. **创建皮肤组件**:在Flex项目中,使用MXML或ActionScript编写皮肤类。导入导出的...

    FLEX4的皮肤制作教程

    其中,`skinClass`属性是Flex SDK 4中新增的功能,用于设置当前控件所使用的皮肤。 ##### 2.3 主程序代码 ```xml &lt;s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx=...

    flex 圆形按钮皮肤的制作

    在本文中,我们将深入探讨如何使用Flex技术来创建一个圆形按钮的皮肤。Flex是一种用于构建富互联网应用程序(RIA)的开放源代码框架,它基于ActionScript编程语言和Flex SDK。让我们一起看看如何通过源码来实现这个...

    FLEX4 皮肤制作教程

    - SparkSkin是Adobe Flex 4 (Gumbo)框架中的一个关键类,用于自定义用户界面(UI)组件的外观。它提供了一种机制,允许开发者通过XML或者ActionScript对控件的外观进行高度定制。 - SparkSkin类位于`spark.skins`...

Global site tag (gtag.js) - Google Analytics