`
征途2010
  • 浏览: 247942 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex动态加载svg图片

阅读更多

1、静态显示

      在FLEX应用程序中可以使用SVG资源, 但只能象JPG和GIF那样作为一种图像引入, 而不包括SVG的一些高级特性, 而且无法在运行时加载, 只能在编译时静态加载,所以图片的大小无法改变。

2、动态加载svg图片

     Degrafa框架已经非常接近在FLEX中动态显示和操作SVG文档了,通过一些简单的转换, 基本上能够实现对SVG图形进行显示和操作。这样大量的SVG图形资源就可以直接在FLEX应用程序中使用了。

      原理就是解析svg文件,然后通过flex生成图片。

      第一步是遍历svg文件

	/**
			 * 遍历svg文件
			 * @param node
			 * 
			 */	
			public  function searchPath( node:XML ):void 
			{
				if(node.name().toString().indexOf("::svg")>-1){
					for each ( var attr:XML in node.attributes() ) 
					{
						if(attr.name().toString()=="width"){
							defaultWidth=Number(attr.toString().replace("px",""));
						}else if(attr.name().toString()=="height"){
							defaultHeight=Number(attr.toString().replace("px",""));
						}
					}
					tempScaleX=tempParams.width/defaultWidth; 
				}
				// Loop over all of the child elements of the node
				for each ( var element:XML in node.elements( ) ) 
				{
					if(element.name().toString().indexOf("::g")>-1)
					{
						for each ( var element1:XML in element.elements() ){
							if(element1.name().toString().indexOf("::text")>-1||element1.name().toString().indexOf("::path")>-1)
							{
								var objSVG1:SvgPath=new SvgPath(element1,surface,red);
								objSVG1.show(tempScaleX)
							}
						}
						//newPath.show();
					}else if(element.name().toString().indexOf("::path")>-1){
						var objSVG:SvgPath=new SvgPath(element,surface,red);
						objSVG.show(tempScaleX)
					}else if(element.name().toString().indexOf("::rect")>-1){
						for each ( var attr1:XML in element.attributes() ) 
						{
							if(attr1.name().toString()=="width"){
								defaultWidth=Number(attr1.toString().replace("px",""));
							}else if(attr1.name().toString()=="height"){
								defaultHeight=Number(attr1.toString().replace("px",""));
							}
						}
					}
				}

      然后是解析属性,并添加事件

	/**
		 * 构造方法 
		 * @param element
		 * @param container
		 * @param red
		 * 
		 */		
		public function SvgPath(element:XML,container:Surface,red:SolidFill):void
		{
			redFill=red;
			surface=container;
			for each ( var attr:XML in element.attributes() ) 
			{
				//Alert.show(attr.name().toString());
				
				switch(attr.name().toString())
				{
					case "id":
						id = attr.toString();
						//Alert.show(id);
						break;
					
					case "d":
						data = attr.toString();
						break;
					
					case "fill":
						fillColor = attr.toString();
						break;
					
					case "fill-opacity":
						fillAlpha = Number(attr.toString());
						break;
					
					case "stroke":
						strokeColor = attr.toString();
						break;
					
					case "stroke-opacity":
						strokeAlpha = Number(attr.toString());
						break;
					
					case "stroke-width":
						strokeWidth = Number(attr.toString());
						break;
					
					case "transform":
						transformStr = attr.toString();
						break;
					
					case "style":
						style = attr.toString();
						break;
					case "font-family":
						fontFamily = attr.toString();
						break;
					case "font-size":
						fontSize = Number(attr.toString());
						break;
					
					default:
						break;
				}
				text=element.text();
			}
			
			if(id == null)
				id = "Path_" + (Math.random()*1000000).toString();
			
			//if(style != null) //style on high priority
			//setByStyle();
		}
		

 

	/**
		 * 鼠标点击事件 
		 * @param event
		 * 
		 */		
		public function onClickGroup2(event:MouseEvent):void
		{
			var id:String="";
			if(event.target is GeometryGroup){
				id=String(event.target.id).split("@")[0];
			}else{
				id=String(event.target.parent.parent.id).split("@")[0];
			}
			ExternalInterface.call("showDetail",id);
		}

 

	/**
		 * 鼠标覆盖事件 
		 * @param event
		 * 
		 */		
		private function onOverGroup(event:MouseEvent):void
		{
			
			var gouopKey:String="";
			if(event.target is GeometryGroup){
				gouopKey=String(event.target.id).split("@")[1];
			}else{
				gouopKey=String(event.target.parent.parent.id).split("@")[1];
			}
			var tempGroup:GeometryGroup=SVGHelp.groupMap[gouopKey];
			tempfill=tempGroup.geometryCollection.getItemAt(0).fill;
			tempGroup.geometryCollection.getItemAt(0).fill=redFill;
		}
		/**
		 * 鼠标移除事件 
		 * @param event
		 * 
		 */		
		private function onOutGroup(event:MouseEvent):void
		{
			
			var gouopKey:String="";
			if(event.target is GeometryGroup){
				gouopKey=String(event.target.id).split("@")[1];
			}else{
				gouopKey=String(event.target.parent.id).split("@")[1];
			}
			var tempGroup:GeometryGroup=SVGHelp.groupMap[gouopKey];
			tempGroup.geometryCollection.getItemAt(0).fill=tempfill;
			tempfill=null;
		}
		
		
		/**
		 * 获取solidFill 
		 * @return 
		 * 
		 */		
		protected function getFillObject():SolidFill
		{
			
			var newSolidFill:SolidFill = new SolidFill();
			newSolidFill.id = "SolidFill" + id;
			
			if(fillColor == null){
				newSolidFill.color = null;
			}	else{
				newSolidFill.color = Number("0x" + fillColor.substr(1));
			}
			
			surface.fillCollection.addItem(newSolidFill);
			
			return newSolidFill;
		}
		
		/**
		 * 获取SolidStroke
		 * @return 
		 * 
		 */		
		protected function getStrokeObject():SolidStroke
		{
			var newSolidStroke:SolidStroke = new SolidStroke();
			newSolidStroke.id = "SolidStroke_" + id;
			newSolidStroke.alpha = 0.5;
			newSolidStroke.weight = strokeWidth;
			
			if(strokeColor == null){
				newSolidStroke.color = null;
			}else{
				newSolidStroke.color = Number("0x" + strokeColor.substr(1));
			}
			
			surface.strokeCollection.addItem(newSolidStroke);
			
			return newSolidStroke;
		}
		
		
		/**
		 * 获取偏移数据 
		 * @return  Matrix
		 * 
		 */		
		protected function getTransformMatrix():Matrix
		{
			if(transformStr == null){
				return null;
			}
			
			if(transformStr.substr(0, 6)!="matrix"){
				return null;
			}
			
			var startIndex:int = transformStr.indexOf("(");
			var endIndex:int = transformStr.indexOf(")");
			
			var str:String = transformStr.substr(startIndex + 1, endIndex - startIndex - 1);
			
			var matrixData:Array = str.split(" ");
			var matrix:Matrix = new Matrix();       
			matrix.a=matrixData[0];
			matrix.b=matrixData[1];
			matrix.c=matrixData[2];
			matrix.d=matrixData[3];
			matrix.tx=matrixData[4]-5;
			matrix.ty=matrixData[5];
			
			return matrix;
		}

    最后组装成图片 

  

/**
		 * 生成并显示图片 
		 * 
		 */		
		public function show(tempScaleX:Number):void
		{
			try
			{
				var group:GeometryGroup = new GeometryGroup();
				
				group.id =id;
				if(text!=""){
					var matrix:Matrix = getTransformMatrix();
					var tttxt:TextField=new TextField();
					tttxt.text=text;
					//tttxt.textColor=;
					
					var format:TextFormat = new TextFormat();         
					format.size = 18/(2*tempScaleX-tempScaleX*tempScaleX); 
					format.font=fontFamily;
					tttxt.setTextFormat(format);
					tttxt.width=25*tttxt.length/(2*tempScaleX-tempScaleX*tempScaleX);
					tttxt.height=28/(2*tempScaleX-tempScaleX*tempScaleX);
					group.addChild(tttxt);
					group.mouseEnabled=false;
					group.mouseChildren=true;
					group.buttonMode=true;
					SVGHelp.groupMap[id.split("@")[1]].addChild(group);
					if(matrix != null){
						group.transform.matrix = matrix;
					}
				}else{
					group.target = surface;
					surface.graphicsCollection.addItem(group);
					//Create new objects
					var dgfObject:Path = new Path(null);
					dgfObject.id = id;
					dgfObject.data = data;
					dgfObject.fill = getFillObject();
					dgfObject.stroke = getStrokeObject();
					group.geometryCollection.addItem(dgfObject);
					SVGHelp.groupMap[id.split("@")[1]]=group;
					group.addEventListener(MouseEvent.CLICK,onClickGroup2);
					group.addEventListener(MouseEvent.ROLL_OVER,onOverGroup);
					group.addEventListener(MouseEvent.ROLL_OUT,onOutGroup);
					group.mouseChildren=true;
					group.buttonMode=true;
				}
			}
			catch(error:Error)
			{
				Alert.show(error.message);
			}
		}

 

分享到:
评论
2 楼 征途2010 2013-08-03  
DegrafaFlex4.swc ,这个有下载吗?

SolidFill这个事flex3 类库
1 楼 JSSSONG 2013-07-03  
请教楼主:
1046: 找不到类型,或者它不是编译时常数: SolidFill。
1046: 找不到类型,或者它不是编译时常数: SolidStroke。
1046: 找不到类型,或者它不是编译时常数: Surface。

上面as代码包这几个错误,是要引入那几个包呢???

相关推荐

    flex svg代码生成图片

    动态加载 SVG 图片可以实现大量的 SVG 图形资源直接在 Flex 应用程序中使用。 三、解析 SVG 文件 解析 SVG 文件是动态加载 SVG 图片的第一步。可以遍历 SVG 文件,遍历 SVG 代码,获取 SVG 文件的宽度和高度,并将...

    svg.js.zip_8svg.con_flex_javascript SVG_svg_svg.js

    这个名为"svg.js.zip_8svg.con_flex_javascript SVG_svg_svg.js"的压缩包,结合描述中的"Trabajar con svg en Flex",似乎关注的是在Adobe Flex环境中使用SVG.js来处理SVG图形。 Flex是一款强大的基于ActionScript...

    flex加载大图片等待特效

    "flex加载大图片等待特效"这一主题就是针对这个问题提出的一种解决方案,它旨在提供一种优雅的方式,在图片加载期间展示等待效果,以提升用户体验。 Flex布局是CSS3中的一种布局模式,它允许容器中的子元素在行或列...

    flex 图片画线,拖动

    为了实际应用这些技术,你需要将图片加载到HTML页面中,设置其为flex项目,然后用SVG绘制线条,并编写JavaScript代码来处理拖动和高亮功能。 总的来说,"flex 图片画线,拖动"这个功能结合了现代Web开发的多种技术...

    Flex 扇形Loading

    Flex扇形Loading是一种在Flex应用中实现的自定义加载指示器,它提供了更加美观和动态的用户体验,替代了默认的加载动画。这种加载效果通常采用扇形或环形的进度条设计,使得用户能够直观地看到加载过程的进度。本文...

    flex相册,图片展示

    在Flex中,可以使用ArrayCollection或DataSource对象来承载来自数据库的数据,然后在界面上动态创建和显示图片元素,实现图片的动态加载和展示。 再者,"带预览图"功能意味着用户在点击主图片之前能看到一个小缩略...

    Flex地图,可以自己添加坐标点,添加信息

    Flex地图是一种基于Adobe Flex技术构建的交互式地图应用框架,它允许开发者自定义地图功能,包括添加特定的坐标点和相关信息。在Flex中,我们可以利用ActionScript 3.0编程语言以及Flex SDK来创建这样的地图应用程序...

    FLEX图表相关解决方案

    最后,“FLEX图表相关解决方案”可能是一个综合性的指南或教程,涵盖了从基础到高级的图表制作技巧,包括但不限于数据绑定、动画效果、交互功能的添加、自定义样式和主题、以及性能优化等方面。这个资源将帮助你解决...

    Flex_Css完全手册

    ActionScript则是基于ECMAScript的脚本语言,用于添加动态行为。 - Flex组件库:Flex包含了一套丰富的预定义组件,如Button、Label、List等,这些组件可以直接在MXML中使用,简化了UI开发。 2. **CSS在Flex中的...

    flex组件介绍

    - **Image**:动态加载GIF、JPEG、PNG、SVG、SWF格式的图像文件。 - **Label**:显示静态文本。 - **List**:显示一个可滚动的单选或多选列表框。 - **Text**:显示不可编辑的多行文本。 - **TextArea**:显示可编辑...

    flex画虚线代码

    在探讨“flex画虚线代码”这一主题时,我们深入解析如何利用Flex框架中的图形功能来绘制虚线,以及理解这段代码背后的核心逻辑和技术要点。Flex是一个强大的开发框架,主要用于构建跨平台的富互联网应用程序(RIA)...

    FLEX流程设计源码

    本资源"Flex流程设计源码"聚焦于利用Flex技术进行流程设计,通过AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)与SVG(Scalable Vector Graphics,可缩放矢量图形)的对比,突显了Flex在创建动态、...

    SvgToDegrafa.rar_SvgToDegrafa_degrafa_flex

    4. **布局与渲染**:在Flex应用中,你需要将 Degrafa 对象添加到显示列表中,设置合适的尺寸和位置,以便在舞台上正确显示SVG图形。 5. **交互与动画**: Degrafa 还提供了丰富的动画和交互功能,例如你可以添加...

    degrafa绘图工具 svg操作

    通过使用Flex技术,开发者可以利用DeGrafa轻松构建交互式的图形用户界面,实现动态图形的绘制和编辑。Flex是一种基于ActionScript的开放源代码框架,用于构建富互联网应用程序(RIA),它与SVG的结合使得图形的创建...

    flex4权威指南教程+全代码 flex flex

    Flex 4使用StageVectorGraphics(SVG)进行矢量图形绘制,提供了更高效的图形渲染。此外,还可以利用BitmapData和Shader效果实现复杂的图像处理。 7. **事件处理**: 事件驱动是Flex应用程序的重要组成部分。Flex...

    Flex help之Flex 皮肤

    Flex帮助开发者创建具有交互性和动态视觉效果的Web应用程序。在Flex中,皮肤是一种重要的概念,它允许开发者自定义用户界面组件的外观和感觉,从而提供更丰富的用户体验。 在Flex中,皮肤可以看作是UIComponent的...

    flex谷歌地图

    它允许开发者用MXML和AS3编写代码,创建具有动态图形、数据可视化和用户交互功能的Web应用。而谷歌地图API则是谷歌提供的服务,允许开发者将地图功能嵌入到自己的网站或应用中。 首先,要搭建Flex Google地图开发...

    FLEX字体助手.rar

    FLEX字体助手可以与之无缝集成,通过ActionScript代码控制字体的动态加载和解码,提供更加灵活的解决方案。 6. **性能优化**:嵌入大量字体可能导致页面加载速度变慢。FLEX字体助手允许开发者根据需求选择性地嵌入...

    FLEX4权威指南,随书资源代码

    4. **Graphical Asset和Effects**:Flex 4支持SVG图形,使得在应用中添加高清晰度的矢量图像是可能的。同时,FXG格式允许导入图形并进行动态效果处理,如淡入淡出、旋转、缩放等。 5. **数据绑定**:Flex 4的数据...

Global site tag (gtag.js) - Google Analytics