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);
}
}
相关推荐
Degrafa扩展就是在FLEX中增加了对矢量数据的动态处理，包括动态添加，删除和修改，并支持SVG的路径格式数据， 因此只需要对现有的SVG数据进行一些必要的转换（以后会有工具支持，但现在只能手工完成），就可以将SVG...
抛球帆布canvas手写签名svg svg画曲线svg画柱形图svg画折线图svg画饼图svg画雷达图svg画环形图svg绘画十年转盘抽奖埃哈特echarts的调整大小和配置ng注解使用响应式表单时间选择器块加载容器倒计时指令权限指令管道...
技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg+定位功能 -- 选择城市 -- 搜索地址 -- 展示所选地址附近商家列表 -- 搜索美食，餐馆 -- 根据距离、销量、评分、特色菜、配送方式等...
■修正2018年节日功能-全部加载SVG矢量图形。 ■改进前端模板为绿色主题。 ■文件引用从单http改为http、https自适应引用方式。 ■提供了.map支持（Map技术介绍https://www.z01.com//help/web/3208.shtml）。 ■修复...
0xAliRaza.github.io ... Display: flex用于布局目的的Display: flex 。 CSS变量 可重用性 这是一个小项目，我不想通过添加一些许可证来使其变得复杂。 因此，您完全可以根据需要自由使用它。 干杯!
支持全高度或内容高度垂直大小调整（基于flex-box） 优化的UX可以清楚地指示打开/关闭的文件夹，所选项目以及对用户输入的React 针对长对象标签进行了优化：标签对于容器而言太大时省略号 针对深层嵌套结构进行了...
vue2 + vuex + vue-router + element-ui + webpack + ES6/7 + axios + less + flex + svg ### 项目图形化管理界面 ``` vue ui ``` ## 项目运行 #### 注意：由于涉及大量的 ES6/7 等新属性，node 需要 8.0 以上...
[GitHub课堂工作流程]（ /workflows/GitHub Classroom Workflow/badge.svg） hft-asgmt-css 去做 添加style.css html文件中的引用style.css 使用display: flex; 在身体上 以某种方式设置表格样式 在不重复的...
完整的动态加载/卸载程序集的解决方案 从NUnit中理解.NET自定义属性的应用（转载） 如何在.NET中实现脚本引擎 (CodeDom篇) .NET的插件机制的简单实现 我对J2EE和.NET的一点理解 难分难舍的DSO（一） ...
儿童英语 -一种学习儿童英语单词的应用程序。 应用结构： 主页 分类页面 ...CSS Flex Eslint Airbnb 开发过程： 页面标记 菜单和卡片标记 添加色彩 卡标记 响应式布局 课堂模式标记 测试游戏