flex4 基础核心之画图

最新推荐文章于 2022-10-02 12:08:52 发布

Hi_JohnsonYu

最新推荐文章于 2022-10-02 12:08:52 发布

阅读量1.4k

点赞数

分类专栏： flex

本文链接：https://blog.csdn.net/yuqixiansheng/article/details/48243425

版权

flex 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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,动态效果组合这些都是亮点,如果你

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