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

 

 

posted @ 2013-08-09 15:43 Adobe Edge 阅读(...) 评论(...) 编辑 收藏