flex4 基础核心之画图

A:计算机程序从可视性上来分的话可以分为有界面的和无界面的程序.

B:计算机反馈给人的信息主要是视觉和听觉.虽然输入数据信息的方式有很多种.

C:界面程序则占了整个应用程序的很大的一部分.当然界面会降低程序的性能,所以要求性能的程序一般没有界面或者很简单的界面.

叨叨完了,下面来讲讲flex4里面的图形编程.

1.flex4中的所有可视化的控件都是可以被画出来的,用基本的几何元素.例如线条,矩形等,加上颜色,角度,坐标,大小,渐变效果等等,进行设计.

2.如果说事件模型和生命周期是flex的一个核心内容.那么画图则是flex的另一个重点.一个是是控制,一个是显示.

3.每个可视化的组件里面都有个graphics属性,用这个属性可以画出基本的线条,和图形.但是这些图形并不是独立的.

4.我要讲的是flex中那些图形是可以成为一个独立元素的概念.就像工具箱中的工具一样,各个独立.一个图形的变化不需要改变其它图形.

5.画图的一些基本的材料一般在mx.graphics.*这个包里面;如填充颜色,线条颜色,渐变方式等

6.一些基本的图形元素,如矩形,椭圆,路径,线条,位图,阴影在spark.primitives.*这个包里面

7.而对图形进行一些计算,变换的工具类,如矩阵,颜色变换等在flash.geom.*这个包里面

下面是代码实例:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="black" width="800" height="600"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
import mx.graphics.SolidColorStroke;

import spark.primitives.BitmapImage;
import spark.primitives.Line;
import spark.primitives.Path;
import spark.primitives.Rect;

protected function init(event:FlexEvent):void
{
// mx.graphics.BitmapFill;
// mx.graphics.LinearGradient;
// mx.graphics.RadialGradient

var fill:SolidColor = new SolidColor(0x00ff00);
var stroke:SolidColorStroke = new SolidColorStroke(0xff0000,1);

// spark.primitives.RectangularDropShadow

var r:Rect = new Rect;
r.x = 200;
r.y = 20;
var distance:Number = 100;
r.width = r.height = distance;
r.radiusY = r.radiusX = distance/2;
r.stroke = stroke;
r.fill = fill;
g.addElement(r);

var l1:Line = new Line;
l1.stroke =stroke;
l1.height = 600;
l1.rotation = -10;
g.addElement(l1);

var path:Path = new Path;
path.x = 40;
path.y = 60;
path.stroke = stroke
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";
path.fill = new SolidColor(0x00ff00);
g.addElement(path);

var b:BitmapImage = new BitmapImage;
b.x = 300;
b.y = 300;
b.source = "2.png";
b.width = b.height = 100;
b.rotation = -30;
g.addElement(b);

// flash.geom.Matrix
// flash.geom.Rectangle;
// flash.geom.Point;
// flash.geom.ColorTransform
}

]]>
</fx:Script>

<s:Group id="g" top="30" left="30">
<s:Image source="2.png"/>
</s:Group>
</s:WindowedApplication>

其中关于Path的data属性的解释参照:http://www.myexception.cn/flex/774234.html, http://www.ibm.com/developerworks/cn/web/wa-svgbitmap/讲的是矢量图形.
这也算是flex中比较有意思和有特色的一个知识点了.丰富的事件,多媒体强大的控制API,动态效果组合这些都是亮点,如果你

还停留在做表单和表单验证,什么和后台的增删查改这些,那你只能是码农级别,而且很乏味.