一个扩展InteractivePNG

lufy 发表于 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类，有什么不明白的可以跟贴提问。

Tedium 发表于 2015-9-9 09:41:23

:loveliness: 强大！

BOREY 发表于 2015-9-9 10:23:30

:)非常好！

Tedium 发表于 2015-9-9 16:27:02

InteractivePNG.js 在使用过程，图片不显示，经测试pngLayer = new InteractivePNG(); 将InteractivePNG类换成LSprite类图片就出来了，请问下这是什么原因呢？

lufy 发表于 2015-9-9 16:37:55

Tedium 发表于 2015-9-9 16:27 static/image/common/back.gif
InteractivePNG.js 在使用过程，图片不显示，经测试pngLayer = new InteractivePNG(); 将InteractivePNG类 ...

对照我给的例子中的代码，看看能不能找到问题

Tedium 发表于 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()类，图片出来了。报错也没了。但看你的测试网址上，一切正常。好奇怪！

Tedium 发表于 2015-9-9 17:16:38

InteractivePNG，LSprite里面有两个不同类使用到的文件。

Tedium 发表于 2015-9-9 17:19:05

http://chuantu.biz/t2/13/1441790459x1822611351.png

Tedium 发表于 2015-9-9 17:42:00

lufy 发表于 2015-9-9 16:37 static/image/common/back.gif
对照我给的例子中的代码，看看能不能找到问题

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

BOREY 发表于 2015-11-18 14:02:31

这个可不可以用在碰撞上:lol

页: [1] 2

lufy's legend's Archiver

一个扩展InteractivePNG