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