如何在RollOver上缩小雪碧图的hitArea

Question

我有一个网格，有许多10x10像素的正方形，只有一条像素线隔开。当用户滚动sprite时，它会增长，动画大小大约是它的4倍--大约40x40像素。当鼠标悬停在精灵上时，精灵保持较大，但如果用户想要滚动相邻的精灵，它会被这个精灵及其更大的尺寸所遮挡。

有没有可能缩小点击区域的大小，以便即使精灵的大小增加，鼠标仍然可以访问或触发下方的相邻精灵-向右、向左、向上、向下？我考虑过使用Mouse_move，但不确定这样做是否会引发太多事件。

我读了下面的帖子。但是，我的hitArea需要与原始的10x10像素子画面大小相同或略大一点。我几乎没有成功过。

我不确定这是否重要:我正在使用一个项目中的ActionsScript类。主类文件是mxml。

Routing Mouse Events through a Sprite in Actionscript 3

AS3: defining hit area

public function onRollOver(event:MouseEvent):void
{  
    //do a bunch of stuff
    timerUp.start();
    timerUp.addEventListener(TimerEvent.TIMER, growSquare);     
}

private function growSquare(e:TimerEvent):void
{
    var maxSize:Number = 40;    
    if (currSprite.width < maxSize) {
        currSprite.width++;
        currSprite.height++;
        if (currSprite.width > maxSize) { 
        currSprite.width = maxSize;
        currSprite.height = maxSize;
        }
        e.updateAfterEvent();   
        } else {
          timerUp.stop();
        }   
  }


    /////////Hit Area Code - From Square Object //////////////////

        var vHeight:Number = 10;
        var vWidth:Number = 10;
        var square:Sprite = new Sprite();   
        square.graphics.beginFill(0x000000); 
        square.graphics.drawRect(0, 0, vWidth, vHeight);
        square.graphics.drawRect(-vWidth/2, -vHeight/2, vWidth, vHeight);
        square.graphics.endFill();

       // try to decrease the hit area, or keep it at the original size
        const hitArea:Sprite = new Sprite()
        hitArea.graphics.beginFill( 0xFFFFFF );
        hitArea.graphics.drawRect(-vWidth/2, -vHeight/2, vWidth, vHeight);
        hitArea.mouseEnabled = false;
        hitArea.visible = false;
        hitArea.x = square.x
        hitArea.y = square.y
        square.hitArea = hitArea;
        addChild( square );
        addChild( hitArea );

Answer 1

您可以将精灵拆分为两个子子精灵:一个用于点击区域，另一个用于绘图。大概是这样的：

public class GridBox extends Sprite
{
    public var hitAreaSprite:Sprite;
    public var drawingSprite:Sprite;

    public function GridBox()
    {
        hitAreaSprite = new Sprite();
        // Draw a 10x10 pixel box in hitAreaSprite, add event listeners, etc.

        drawingSprite = new Sprite();
        // Disable mouse input for drawingSprite here.

        addChild(hitAreaSprite);
        addChild(drawingSprite);
    }
}

...

var yourSprite:GridBox = new GridBox();

然后将yourSprite.hitAreaSprite设置为10x10像素，并将鼠标侦听器事件添加到其中。yourSprite.drawingSprite必须包含所有图形元素和绘图。将其mouseChildren和mouseEnabled属性设置为false。

然后，当sprite应该增长时，不要直接更改yourSprite.width，而是更改yourSprite.drawingSprite.width。由于此子精灵未启用鼠标，并且hitAreaSprite未移动，因此下面的精灵仍将接收鼠标事件。