Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

上一篇我们说到了使用jquery加载svg图片,能够解决精确的边缘检测问题,本篇将使用另一种方式来添加svg的精确交互。

效果图:

一、制作中国陆地版块地图矢量图

在Adobe Illustrator中,制作中国地图矢量图(也可从网上下载矢量图,但是也要做相应修改),在图层命名中,对应不同的省份图块,分别命名为相应的省份名称,如下图所示:

修改对应名称是为了在选中不同省份的时候,能够显示正确的名称。

二、添加显示名称功能

1、在Edge中,导入对应的中国地图svg,然后将之拖放在stage中,如下图,在此添加了阴影效果

2、添加一个text,用于显示名称,在stage中添加creationComplete或compositionReady函数

yepnope({

load: "lib/EdgeCommons.js",

complete: function(){

EC.centerStage();

//Enable SVG access

EC.accessSVG(sym.$("chinamap")).done(

function (svgDocument){

svgDocument.addEventListener("click", function(event){

sym.$("Text").html(event.target.id);

});

}

);

}//end of complete func

});

在此我们还是用到了EdgeCommons这个官方库,里面提供了svg图形的相关功能,首先进入指定名称的svg图片,本例子的svg图片名称为chinamap,进入成功后,为对象添加监听事件,当鼠标点击的时候,获得点击部分的名称,并将之显示在text上,预览可得对应效果。

三、添加颜色置换功能

1、在stage中添加几个Ellipse,并且分别填充不同的颜色(最好跟地图上的颜色不同,以便区分),添加完毕后,在stage的compositionReady函数的监听事件内部,显示省份的代码下方添加一句代码:

sym.setVariable("selectedPart",event.target);

如图所示:

这样就得到了一个全局的变量名称,该名称记录了选中的部分svg图块

2、为每个Ellipse添加click事件,当点击不同的圆圈,选中部分的图块就会被填充为圆圈内部的填充颜色

var selectedPart = sym.getVariable("selectedPart");

$(selectedPart).css("fill", $(e.currentTarget).css("background-color"));

至此,交互功能制作完成,在浏览器中预览效果,可以进行对应的交互操作。

原文地址:http://www.cnblogs.com/adobeedge/p/Adobe_Edge_SVG.html

Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换的更多相关文章

  1. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  2. Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果

    Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...

  3. adobe edge animate 和 adobe animate cc 有啥区别?

    经常有人问这两款软件的区别,每次都要打字好烦,特此总结发帖如下: 一.首先各自软件介绍 ①adobe edge animate 是adobe公司早期推出的一款网页互动工具.通过HTML+CSS+Jav ...

  4. Adobe edge animate制作HTML5动画可视化工具(一)

    Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...

  5. Adobe Edge Animate CC 不再开发更新!

    Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...

  6. Adobe Edge Animate –EdgeCommons Log和全局变量设置功能

    Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...

  7. Adobe Edge Animate –使用EdgeCommons加载和播放音频

    Adobe Edge Animate –使用EdgeCommons加载和播放音频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在Edge中,可以new一 ...

  8. Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频

    Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...

  9. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

随机推荐

  1. 转】Maven学习总结(七)——eclipse中使用Maven创建Web项目

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4054814.html 感谢! 一.创建Web项目 1.1 选择建立Maven Project 选择File -& ...

  2. 现代程序设计——homework-06

    题目: http://www.cnblogs.com/xinz/p/3382048.html 这是一道要多坑有多坑的题目,题目有很多步.综合起来就是这个意思: 在很久以前,有一个大牛,当然那个时候他还 ...

  3. delphi回调函数

    文章来源: http://anony3721.blog.163.com/blog/static/5119742010866050589/ 一.主单元 unit UnMain; interface us ...

  4. UVALive 7281 Saint John Festival (凸包+O(logn)判断点在凸多边形内)

    Saint John Festival 题目链接: http://acm.hust.edu.cn/vjudge/contest/127406#problem/J Description Porto's ...

  5. 关于在Eclipse中使用正则表达式替换的一点记录(使用正则表达式的分组)

    今天在工作中遇到了点替换的麻烦事,由于数据类进行了变动,具体情况是这样的,需要将下面的代码: player.skillData[i].name 替换为: player.skillData.getSki ...

  6. 如何在Visual Studio中选择C++和C#的编译器版本

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在Visual Studio中选择C++和C#的编译器版本.

  7. [GUI]界面开发类库

    如果我们不十分清楚需要什么样的界面风格及如何实现,请按以下两个步骤操作: (1)       搞清楚这种风格叫什么名字 (2)       查现有的比较著名的GUI库是否已有相应的实现方案. (3)  ...

  8. 更新证书错误Code Sign error: Provisioning profile ‘XXXX'can't be found

    在Xcode中当你在更新了你得证书而再重新编译你的程序,真机调试一直会出现 Code Sign error: Provisioning profile ‘XXXX’ can't be found是不是 ...

  9. javascript操作Math对象的方法总结

    //数学函数--abs 返回数字的绝对值 var a; /*a = Math.abs(-12); alert(a); //12 //数学函数--acos 返回数的反余弦数 a = Math.acos( ...

  10. Sonatype Nexus 搭建Maven 私服

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...