lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 17676|回复: 14

一个扩展InteractivePNG

[复制链接]

37

主题

8

好友

9305

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2015-9-9 00:48:19 |显示全部楼层
有朋友问lufylegend中如何实现as3的InteractivePNG,即在相应鼠标事件的时候,过滤图片中的透明区域,鉴于这个需求有一定的泛用性,我暂时扩展了一个简单的InteractivePNG类,目前只包含最基本的过滤透明区域功能,以后可能会继续完善。
下面是完整的InteractivePNG类
http://lufylegend.com/demo/test/InteractivePNG/InteractivePNG.js

使用方法,
http://lufylegend.com/demo/test/InteractivePNG/3.html
通过看代码,可以看到使用上和LSprite没有区别,因为透明区域的过滤都是在InteractivePNG内部自动执行的。

如果想用带透明区域的图片来给鼠标实现一定的遮挡,该怎么办呢?下面是例子
不使用鼠标容器的情况下
http://lufylegend.com/demo/test/InteractivePNG/1.html
使用鼠标容器的情况下
http://lufylegend.com/demo/test/InteractivePNG/2.html

暂时就这些了,如果想使用InteractivePNG类,有什么不明白的可以跟贴提问。
不回答与技术和引擎不相关的问题
回复

使用道具 举报

0

主题

0

好友

20

积分

士兵

Rank: 1

发表于 2015-9-9 09:41:23 |显示全部楼层
强大!
回复

使用道具 举报

21

主题

0

好友

279

积分

帐下督

Rank: 2

发表于 2015-9-9 10:23:30 |显示全部楼层
非常好!
回复

使用道具 举报

0

主题

0

好友

20

积分

士兵

Rank: 1

发表于 2015-9-9 16:27:02 |显示全部楼层
InteractivePNG.js 在使用过程,图片不显示,经测试pngLayer = new InteractivePNG(); 将InteractivePNG类换成LSprite类图片就出来了,请问下这是什么原因呢?
回复

使用道具 举报

37

主题

8

好友

9305

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2015-9-9 16:37:55 |显示全部楼层
Tedium 发表于 2015-9-9 16:27
InteractivePNG.js 在使用过程,图片不显示,经测试pngLayer = new InteractivePNG(); 将InteractivePNG类 ...

对照我给的例子中的代码,看看能不能找到问题
不回答与技术和引擎不相关的问题
回复

使用道具 举报

0

主题

0

好友

20

积分

士兵

Rank: 1

发表于 2015-9-9 17:01:15 |显示全部楼层
恩恩,直接你的代码在本地测试的。
在使用new InteractivePNG()类时,我用Chrome调试时,报错:Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
只要将new InteractivePNG()类,换成new LSprite()类,图片出来了。报错也没了。但看你的测试网址上,一切正常。好奇怪!
回复

使用道具 举报

0

主题

0

好友

20

积分

士兵

Rank: 1

发表于 2015-9-9 17:16:38 |显示全部楼层
InteractivePNG,LSprite里面有两个不同类使用到的文件。

Test.rar

68.92 KB, 下载次数: 17038

回复

使用道具 举报

0

主题

0

好友

20

积分

士兵

Rank: 1

发表于 2015-9-9 17:19:05 |显示全部楼层
回复

使用道具 举报

0

主题

0

好友

20

积分

士兵

Rank: 1

发表于 2015-9-9 17:42:00 |显示全部楼层
lufy 发表于 2015-9-9 16:37
对照我给的例子中的代码,看看能不能找到问题

找到问题了,InteractivePNG里面用了bitmapData.lock();  牵涉到getImageData()图片跨域问题。
应该是在本地测试不了,刚刚在localhost里面测试了下就可以了。
感谢大神!提供了好东西。
回复

使用道具 举报

21

主题

0

好友

279

积分

帐下督

Rank: 2

发表于 2015-11-18 14:02:31 |显示全部楼层
这个可不可以用在碰撞上
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

防止垃圾广告,请填写任意字符

Archiver|lufy's legend

GMT+8, 2024-3-29 15:37 , Processed in 0.068463 second(s), 32 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部