EgreWing带透明Image点击区域测试
问题
Egret中使用带Aplha图片，虽然合了图集，但是点击区域依旧使用源图片的矩形区域判定。界面上的点击事件完全无法控制，非所见即所得。目前没查到官方有提供合理的解决方案。
所以只能从本源来想办法：图片边缘的空白区域不应那么多，是吧？
新的问题来了：
-
最简单情况：该图片是单张图片，比如单张UI，那可以直接找美术修改该图片，边缘处理一下，这个还好（这是UI的锅无疑）。
-
复杂一点：以特效序列帧为例，你可能会说也单张处理，但这样动画一播放就会发现中心点对不上。所以还是只能按单组动画只能按一个统一大小来输出。而如果每个特效的底图尺寸都不一样的话，显然很影响工作效率。一般美术的处理肯定是统一一个大小的背景，如512x512或者1024x1024。放到别的引擎如unity中合图集之后毫无问题，Egret真的坑。。
-
复杂一点：人物avatar，各个部位组装输出，只能以统一的规格，如1024*1024，这样各部位的动画偏移才能方便编辑存储，这种情况不在本文讨论之列。
按钮是否可以点击测试：
-
image_big.touchEnabled = true; 点击不到
-
image_big.touchEnabled = true; 可以点击
-
group.touchEnabled = true; image_big.touchEnabled = true; 点击不到
-
group.touchEnabled = true; image_big.touchEnabled = false; 点击不到
-
group.touchEnabled = true; image_big.touchEnabled = true; 可以点击
继续探讨
有人说，可以把group和image的touchEnabled都设为false。是的。wing编辑的时候你把每一层父节点都设置一下，这里可以临时解决问题（相信我，你不会愿意这样去编辑的）。
而且，就算手动逐个编辑，list组件我们也会经常使用，list下的ItemRender默认的selected是使用外层group的事件来触发的，全部禁用的话，又需要自己去加按钮，写选中切换逻辑，程序会很费事。。
综上，还是从源头上解决。思路：读取该序列帧每张图片的区域，计算出可以包住所有图片的外圈范围，在1024*1024的大图基础上裁剪每张图片，生成统一的大小。。单张图片就当做只有一帧的序列帧来处理。如下图：三张序列帧的范围frame1,frame2,frame3,最终导出3张最外圈大小的图片。
写工具
使用Python的PIL-Image库最适合，具体实现参见我的另一篇文章： https://blog.csdn.net/liyaxin2010/article/details/82796547
其他
裁剪之后的图片在wing上编辑也是所见即所得，策划编辑好UI，看到的区域和实际点击的区域统一，就不会出现加一个特效，换一张图片，明明没有挡着后面的按钮，却又点不到了之类的无聊问题。。