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); } }
相关推荐
动态加载 SVG 图片可以实现大量的 SVG 图形资源直接在 Flex 应用程序中使用。 三、解析 SVG 文件 解析 SVG 文件是动态加载 SVG 图片的第一步。可以遍历 SVG 文件,遍历 SVG 代码,获取 SVG 文件的宽度和高度,并将...
这个名为"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布局是CSS3中的一种布局模式,它允许容器中的子元素在行或列...
为了实际应用这些技术,你需要将图片加载到HTML页面中,设置其为flex项目,然后用SVG绘制线条,并编写JavaScript代码来处理拖动和高亮功能。 总的来说,"flex 图片画线,拖动"这个功能结合了现代Web开发的多种技术...
Flex扇形Loading是一种在Flex应用中实现的自定义加载指示器,它提供了更加美观和动态的用户体验,替代了默认的加载动画。这种加载效果通常采用扇形或环形的进度条设计,使得用户能够直观地看到加载过程的进度。本文...
在Flex中,可以使用ArrayCollection或DataSource对象来承载来自数据库的数据,然后在界面上动态创建和显示图片元素,实现图片的动态加载和展示。 再者,"带预览图"功能意味着用户在点击主图片之前能看到一个小缩略...
Flex地图是一种基于Adobe Flex技术构建的交互式地图应用框架,它允许开发者自定义地图功能,包括添加特定的坐标点和相关信息。在Flex中,我们可以利用ActionScript 3.0编程语言以及Flex SDK来创建这样的地图应用程序...
最后,“FLEX图表相关解决方案”可能是一个综合性的指南或教程,涵盖了从基础到高级的图表制作技巧,包括但不限于数据绑定、动画效果、交互功能的添加、自定义样式和主题、以及性能优化等方面。这个资源将帮助你解决...
ActionScript则是基于ECMAScript的脚本语言,用于添加动态行为。 - Flex组件库:Flex包含了一套丰富的预定义组件,如Button、Label、List等,这些组件可以直接在MXML中使用,简化了UI开发。 2. **CSS在Flex中的...
- **Image**:动态加载GIF、JPEG、PNG、SVG、SWF格式的图像文件。 - **Label**:显示静态文本。 - **List**:显示一个可滚动的单选或多选列表框。 - **Text**:显示不可编辑的多行文本。 - **TextArea**:显示可编辑...
在探讨“flex画虚线代码”这一主题时,我们深入解析如何利用Flex框架中的图形功能来绘制虚线,以及理解这段代码背后的核心逻辑和技术要点。Flex是一个强大的开发框架,主要用于构建跨平台的富互联网应用程序(RIA)...
本资源"Flex流程设计源码"聚焦于利用Flex技术进行流程设计,通过AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)与SVG(Scalable Vector Graphics,可缩放矢量图形)的对比,突显了Flex在创建动态、...
4. **布局与渲染**:在Flex应用中,你需要将 Degrafa 对象添加到显示列表中,设置合适的尺寸和位置,以便在舞台上正确显示SVG图形。 5. **交互与动画**: Degrafa 还提供了丰富的动画和交互功能,例如你可以添加...
通过使用Flex技术,开发者可以利用DeGrafa轻松构建交互式的图形用户界面,实现动态图形的绘制和编辑。Flex是一种基于ActionScript的开放源代码框架,用于构建富互联网应用程序(RIA),它与SVG的结合使得图形的创建...
Flex 4使用StageVectorGraphics(SVG)进行矢量图形绘制,提供了更高效的图形渲染。此外,还可以利用BitmapData和Shader效果实现复杂的图像处理。 7. **事件处理**: 事件驱动是Flex应用程序的重要组成部分。Flex...
Flex帮助开发者创建具有交互性和动态视觉效果的Web应用程序。在Flex中,皮肤是一种重要的概念,它允许开发者自定义用户界面组件的外观和感觉,从而提供更丰富的用户体验。 在Flex中,皮肤可以看作是UIComponent的...
它允许开发者用MXML和AS3编写代码,创建具有动态图形、数据可视化和用户交互功能的Web应用。而谷歌地图API则是谷歌提供的服务,允许开发者将地图功能嵌入到自己的网站或应用中。 首先,要搭建Flex Google地图开发...
FLEX字体助手可以与之无缝集成,通过ActionScript代码控制字体的动态加载和解码,提供更加灵活的解决方案。 6. **性能优化**:嵌入大量字体可能导致页面加载速度变慢。FLEX字体助手允许开发者根据需求选择性地嵌入...
4. **Graphical Asset和Effects**:Flex 4支持SVG图形,使得在应用中添加高清晰度的矢量图像是可能的。同时,FXG格式允许导入图形并进行动态效果处理,如淡入淡出、旋转、缩放等。 5. **数据绑定**:Flex 4的数据...