Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

在edge中，当我们导入一张图片，不管是jpg还是png格式，为图片添加诸如click等事件时，检测的范围总是为矩形，即使将svg图片直接添加到舞台，也是这种情况，那么如果像下图这样一个图片，我们要检测鼠标点击的是五角星还是圆圈部分，这样就涉及到精确判定图形边缘的问题。

 

下面，将通过jquery的svg图片加载，来解决这个问题：

一、使用adobe illustrator制作svg图片

在AI中我们分别使用图形工具创建圆圈和五角星图案，分别在两个图层，并分别命名为circle和star（在edge中有用），如下图：

 

导出为svg格式，本例子命名为svg.svg

并且保存在Edge工程目录下的img文件夹中。

二、添加jquery.svg.package

下载jquery.svg.package-1.4.5/jquery.svg.min.js文件，放置在Edge工程目录下lib文件夹中：

 

三、为svg图片显示添加“容器”

 

 

如图，添加元件container，用于显示svg图片，添加文字text用于显示检测信息

四、添加函数加载svg及检测测试

在stage添加compositionReady函数：

 

yepnope({

         load: "lib/jquery.svg.package-1.4.5/jquery.svg.min.js",

         complete: function(){

                   //

                   function onSvgLoad(svg, error){

                            $('#star').click( function(){

                                     sym.$("text").html("You Click the Star!");

                            });

                            $('#circle').click(function(){

                                     sym.$("text").html("You Click the Circle!");  

                            });

                   }//end of onSvgLoad

                   //select the container to show SVG file

                   var container = sym.$("container");

                   //begin to load SVG file

                   container.svg({});

                   var svg = container.svg('get');

                   svg.load('img/svg.svg', {

                            addTo: true,

                            changeSize: true,

                            onLoad: onSvgLoad

                   });

         }//end of complete func

});

选择container用于加载svg图片，定义变量用于加载svg图片，并且在加载完成之后调用onSvgLoad函数，在onSvgLoad函数中，进行鼠标点击位置的检测，并且将检测结果显示在text中，测试结果如图：

 

 

原文地址： http://www.cnblogs.com/adobeedge/p/Adobe_Edge_LoadSVG.html