Flex4 Spark Ellipse Rect Line Path SolidColorStroke 的简单示例

最新推荐文章于 2022-02-10 15:08:37 发布

PrinceTerence

最新推荐文章于 2022-02-10 15:08:37 发布

阅读量2.2k

点赞数

分类专栏： Flex4

本文链接：https://blog.csdn.net/PrinceTerence/article/details/24407055

版权

Flex4 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

直接写出一个Mxml来示例几个基本的图形绘制

<?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"
  width="100%" height="100%">
<fx:Script><![CDATA[
  import mx.graphics.SolidColorStroke;
  
  private const _scs:SolidColorStroke =
    new SolidColorStroke(0x008000, 5, 1.0);
  
]]></fx:Script>
  <s:Panel width="100%" height="100%" title="Test Draw Sth!">
    <s:Ellipse x="12" y="39" width="50" height="40"
      stroke="{_scs}"/>
	<s:Ellipse x="20" y="50" width="30" height="20"
				 stroke="{_scs}"/>
    <s:Rect x="127" y="40" width="50" height="40" stroke="{_scs}"/>
    <s:Line xFrom="90" yFrom="80" xTo="120" yTo="140"
      stroke="{_scs}"/>
    <s:Path data="M30 168L132 186 162 144 50 165" stroke="{_scs}"/>
    <s:Label text="What a fu*king day!"
      x="190" y="130" rotation="-30"/>
    <s:Label text="Oh Yeah!"
			   x="240" y="90" rotation="-30"/>
    <s:RichText textRotation="rotate90" fontWeight="bold"
      text="A B C D E"/>
    <s:RichEditableText text="富文本输入域" x="260" y="120"/>
    <s:BitmapImage x="221" y="145" source="@Embed('XXX.jpg')"/>
  </s:Panel>
</s:Application>

Ellipse、Rect、Path都是FilledElement的子类

参考：

Rect 类是绘制矩形的填充图形元素。矩形的角可以是圆角。drawElementent() 方法会调用 Graphics.drawRect() 和 Graphics.drawRoundRect() 方法。

Ellipse 类是绘制椭圆的填充图形元素。为了绘制椭圆，此类会调用 Graphics.drawEllipse() 方法。

Line 类是绘制两点之间的直线的图形元素。

Path 类是绘制一系列路径段的填充图形元素。在矢量图形中，路径是按直线段或曲线段连接的一系列点。这些线在一起形成一个图像。在 Flex 中，您可以使用 Path 类来定义通过一组线段构造的一个复杂矢量形状。

SolidColorStroke 类定义线条的属性。

RichText 是可以显示一行或多行富文本或嵌入图像的低级 UIComponent。

RichEditableText 为低级的 UIComponent，用于显示、滚动、选择和编辑各种格式的文本。富文本可以包含可单击的超链接以及可嵌入或从 URL 加载的内嵌图形。

BitmapImage 元素在其父元素的坐标空间中定义一个矩形区域，使用从源文件提取的位图数据进行填充。