Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换
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地图交互-精确的边缘及颜色置换的更多相关文章
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果
Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...
- adobe edge animate 和 adobe animate cc 有啥区别?
经常有人问这两款软件的区别,每次都要打字好烦,特此总结发帖如下: 一.首先各自软件介绍 ①adobe edge animate 是adobe公司早期推出的一款网页互动工具.通过HTML+CSS+Jav ...
- Adobe edge animate制作HTML5动画可视化工具(一)
Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...
- Adobe Edge Animate CC 不再开发更新!
Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...
- Adobe Edge Animate –EdgeCommons Log和全局变量设置功能
Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...
- Adobe Edge Animate –使用EdgeCommons加载和播放音频
Adobe Edge Animate –使用EdgeCommons加载和播放音频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在Edge中,可以new一 ...
- Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频
Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
随机推荐
- 转】Maven学习总结(七)——eclipse中使用Maven创建Web项目
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4054814.html 感谢! 一.创建Web项目 1.1 选择建立Maven Project 选择File -& ...
- 现代程序设计——homework-06
题目: http://www.cnblogs.com/xinz/p/3382048.html 这是一道要多坑有多坑的题目,题目有很多步.综合起来就是这个意思: 在很久以前,有一个大牛,当然那个时候他还 ...
- delphi回调函数
文章来源: http://anony3721.blog.163.com/blog/static/5119742010866050589/ 一.主单元 unit UnMain; interface us ...
- UVALive 7281 Saint John Festival (凸包+O(logn)判断点在凸多边形内)
Saint John Festival 题目链接: http://acm.hust.edu.cn/vjudge/contest/127406#problem/J Description Porto's ...
- 关于在Eclipse中使用正则表达式替换的一点记录(使用正则表达式的分组)
今天在工作中遇到了点替换的麻烦事,由于数据类进行了变动,具体情况是这样的,需要将下面的代码: player.skillData[i].name 替换为: player.skillData.getSki ...
- 如何在Visual Studio中选择C++和C#的编译器版本
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在Visual Studio中选择C++和C#的编译器版本.
- [GUI]界面开发类库
如果我们不十分清楚需要什么样的界面风格及如何实现,请按以下两个步骤操作: (1) 搞清楚这种风格叫什么名字 (2) 查现有的比较著名的GUI库是否已有相应的实现方案. (3) ...
- 更新证书错误Code Sign error: Provisioning profile ‘XXXX'can't be found
在Xcode中当你在更新了你得证书而再重新编译你的程序,真机调试一直会出现 Code Sign error: Provisioning profile ‘XXXX’ can't be found是不是 ...
- javascript操作Math对象的方法总结
//数学函数--abs 返回数字的绝对值 var a; /*a = Math.abs(-12); alert(a); //12 //数学函数--acos 返回数的反余弦数 a = Math.acos( ...
- Sonatype Nexus 搭建Maven 私服
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...