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);
			}
		}