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