Actionscript 从 Sprite 鼠标事件中检索位图数据

Question

我创建了一个带有数据的位图并将其放入精灵中以便接收鼠标事件。但是，我正在努力读取精灵中的位图数据。

function showBitmapData(e:Event):void
    {
    var bData:BitmapData = new BitmapData(video.width, video.height);
    bData.draw(video);

    var bmap:Bitmap = new Bitmap(bData);
    bmap.x = 220;
    bmap.y = 20;
    bmap.scaleX = bmap.scaleY = 2;

    canvas = new Sprite;
    addChild(canvas);
    canvas.addChild(bmap);

    //Mouse Track Pixel Colors
    canvas.addEventListener(MouseEvent.CLICK, readPixel);
    }

function readPixel(e:MouseEvent):void
    {
    var hex:uint = e.bmap.bData.getPixel32(mouseX, mouseY); // <- is the problem?
    var pixelAlpha:int = (hex >>> 0x18) & 0xff;
    var red:int = (hex >>> 0x10) & 0xff;
    var green:int = (hex >>> 0x08) & 0xff;
    var blue:int = hex & 0xff;

    colorText.text = "Red:" + red + " Green:" + green + " Blue:" + blue + " Alpha:" + pixelAlpha;
    }

Answer 1

您正在尝试从 e 读取字段 bmap，该字段是 MouseEvent 并且没有此类字段。

此外，Bitmap 没有名为 bData 的字段，只有 bitmapData 字段。

从精灵获取位图的一种方法是使用事件的目标并使用 getObjectsUnderPoint 获取位图（如果你的精灵中有多个位图）

也不要忘记从bmap中获取鼠标坐标，否则你将不得不使用Point使用 globalToLocal 和 LocalToGlobal

// function to get the bitmap from a display object container
// using the mouse coordinate
function findBitmap(container:DisplayObjectContainer):Bitmap {
 if (container === null)
   return null;

 var childs:Array = container.getObjectsUnderPoint(
    new Point(container.mouseX, container.mouseY)
 );

 while (childs.length > 0) {
   var ret:Bitmap = childs.pop() as Bitmap;
   if (ret !== null)
     return ret;
 }

 return null;
}

// ....
canvas = new Sprite;
addChild(canvas);
canvas.addChild(bmap);
//Mouse Track Pixel Colors
canvas.addEventListener(MouseEvent.CLICK, readPixel);
// ...

function readPixel(e:MouseEvent):void {
    // found the bitmap from the currentTarget
    var bmap:Bitmap=findBitmap(e.currentTarget as DisplayObjectContainer);

    var hex:uint=0;

    if (bmap!==null) {
     hex = bmap.bitmapData.getPixel32(bmap.mouseX, bmap.mouseY); 
    }

    var pixelAlpha:int = (hex >>> 0x18) & 0xff;
    var red:int = (hex >>> 0x10) & 0xff;
    var green:int = (hex >>> 0x08) & 0xff;
    var blue:int = hex & 0xff;

    colorText.text =
         "Red:" + red + " Green:" + green + " Blue:" + blue + " Alpha:" + pixelAlpha;
    }

Answer 2

最简单的方法是使位图成为画布的属性，以便可以轻松地从画布中引用它。该事件是从画布对象触发的，因此 e.target 将成为您的画布。从那里，您可以点击位图，位图的 bitmapData 属性将引用您的位图数据。

function showBitmapData(e:Event):void
    {
    var bData:BitmapData = new BitmapData(video.width, video.height);
    bData.draw(video);

    var bmap:Bitmap = new Bitmap(bData);
    bmap.x = 220;
    bmap.y = 20;
    bmap.scaleX = bmap.scaleY = 2;

    canvas = new MovieClip(); //sprites can't have arbitrary properites
    addChild(canvas);
    canvas.bmap = bmap; //*** Look at me! I can be referenced later!
    canvas.addChild(bmap);

    //Mouse Track Pixel Colors
    canvas.addEventListener(MouseEvent.CLICK, readPixel);
    }

function readPixel(e:MouseEvent):void
    {

    var hex:uint = e.target.bmap.bitmapData.getPixel32(mouseX, mouseY); // e.target is your "canvas" from before
    var pixelAlpha:int = (hex >>> 0x18) & 0xff;
    var red:int = (hex >>> 0x10) & 0xff;
    var green:int = (hex >>> 0x08) & 0xff;
    var blue:int = hex & 0xff;

    colorText.text = "Red:" + red + " Green:" + green + " Blue:" + blue + " Alpha:" + pixelAlpha;
    }

Answer 3

问题是“e”是一个事件，它没有 bmap 属性。它将有一个目标属性，但这将是一个事件调度程序，在本例中是您的画布。

我建议：

创建一个扩展精灵并包含位图的自定义类。
创建该类的一个实例并将其添加到舞台中。
将事件侦听器添加到该对象而不是舞台。
在您的事件侦听器中，检查 event.target 是否是您的自定义类的实例。
如果是这样，您可以使用事件的 localX 和 localY 来获取对象的位图属性的像素值。