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 = false; image_big.touchEnabled = false; 可以點擊
繼續探討
有人說，可以把group和image的touchEnabled都設爲false。是的。wing編輯的時候你把每一層父節點都設置一下，這裏可以臨時解決問題（相信我，你不會願意這樣去編輯的）。
而且，就算手動逐個編輯，list組件我們也會經常使用，list下的ItemRender默認的selected是使用外層group的事件來觸發的，全部禁用的話，又需要自己去加按鈕，寫選中切換邏輯，程序會很費事。。
綜上，還是從源頭上解決。思路：讀取該序列幀每張圖片的區域，計算出可以包住所有圖片的外圈範圍，在1024*1024的大圖基礎上裁剪每張圖片，生成統一的大小。。單張圖片就當做只有一幀的序列幀來處理。如下圖：三張序列幀的範圍frame1,frame2,frame3,最終導出3張最外圈大小的圖片。
寫工具
使用Python的PIL-Image庫最適合，具體實現參見我的另一篇文章：
Python裁剪序列幀空白區域-CutImage-https://blog.csdn.net/liyaxin2010/article/details/84196790
其他
裁剪之後的圖片在wing上編輯也是所見即所得，策劃編輯好UI，看到的區域和實際點擊的區域統一，就不會出現加一個特效，換一張圖片，明明沒有擋着後面的按鈕，卻又點不到了之類的無聊問題。。