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

2021-10-31 21:38:01

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

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

在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中，测试结果如图：

码农公寓