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"));

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