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);
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读