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的数据...