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

直接写出一个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 元素在其父元素的坐标空间中定义一个矩形区域,使用从源文件提取的位图数据进行填充。

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...