如何使用透明图像来屏蔽图像并添加eventlistener

Question

简单的部分是为它创建图像和掩码：

// The jpg
var elementImage:Image = new Image();
elementImage.source = "/assets/materials/9/main-body.jpg";
elementImage.cacheAsBitmap = true;

// the mask
var elementImageMask:Image = new Image();
elementImageMask.source = "/assets/elements/4/main-body-mask.png";
elementImageMask.cacheAsBitmap = true;
elementImage.mask = elementImageMask;

addChild(elementImageMask);
addChild(elementImage);

我的问题是我想将EventListener添加到图像的非透明区域。

elementImage.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
elementImage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

但这不适用于此。即使我将鼠标悬停在透明部分上，事件监听器也会做出反应。

如果我绘制一个矢量图形并使用它来掩盖图像它就可以正常工作......

Answer 1

遇到同样的问题：解决方法是将精灵设置为对象的hitarea。由于我自己懒得画一个hitarea-sprite，我写了一个简单的方法将透明的png图像转换为精灵。 Detailed explanation how that works can be found here.

Answer 2

检查MouseEvent的localX和localY是否在掩码的范围内。否则，忽略该操作。

Answer 3

所以我对我的代码进行了讨论，并找到了......：

而不是使用.png文件作为掩码，您也可以使用矢量形状。您也可以尝试使用svg文件（tinyurl.com/2xe9vs）。它工作但是：

  

您无法在运行时导入SVG文件;您只能在编译时将它们嵌入Flex应用程序中。

所以解决方案是使用.swf文件：

// The jpg
var elementImage:Image = new Image();
elementImage.source = "/assets/materials/9/main-body.jpg";

// the mask
var elementImageMask:SWFLoader = new SWFLoader();
elementImageMask.load("/flash/hoodie/body.swf");
elementImage.mask = elementImageMask;

addChild(elementImageMask);
addChild(elementImage);

elementImage.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
elementImage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

你也可以使用InteractivePNG图书馆。