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
最新文章
- Nginx模块之————RTMP模块在Ubuntu上以串流直播HLS视频
- htpasswd 详解
- mysql基本内容学习过程
- PHP javascript 值互相引用(不用刷新页面)
- 信息增益(IG,Information Gain)的理解和计算
- 1、shell 简介
- C++指针的用法
- hadoop_eclipse及HDT插件的使用
- 关于typecho0.9代码高亮与数学公式支持
- Python title()、upper()、lower()方法--string
- .NET西安社区 [拥抱开源,又见 .NET] 活动简报
- day 7-9 IO模型
- sed 收集
- cocos creator 入门理解点
- 《高性能SQL调优精要与案例解析》——10.4_SQL语句改写部分文档
- day27-反射
- VUE.JS 窗口发生变化时,获取当前窗口的高度。
- linux和mac
- Java并发编程的艺术(十三)——锁优化
- SaltStack安装及配置
热门文章
- 转载-清除Linux中MySQL的使用痕迹~/.mysql_history
- Spark SQL概念学习系列之SQL on Spark的简介(三)
- Android问题-打开DelphiXE8与DelphiXE10新建一个空工程提示";out of memory";
- How to include JavaScript file in JSF
- HDU 5521 Meeting (最短路,dijstra)
- c# 使用ChartDirector绘图的一些个人体会
- 在 CentOS 上安装和配置 OpenNebula
- MongoDB 快速入门--初级
- C# 使用微软的Visual Studio International Pack 类库提取汉字拼音首字母
- leetcode || 53、Maximum Subarray