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