当我拖动另一个精灵时，如何检测指针何时在精灵上方？答案

【问题标题】：How do I detect when the pointer is over a sprite while I'm dragging another sprite?当我拖动另一个精灵时，如何检测指针何时在精灵上方？
【发布时间】：2017-02-24 23:27:10
【问题描述】：

在我的 update() 函数中，我使用 pointerOver() 来检测指针何时位于精灵上方。这通常工作正常。但是，如果我碰巧在拖动另一个精灵，pointerOver() 函数总是返回 false。

我想我可以通过获取指针的位置并将其与我的精灵的位置和边界进行比较来解决这个问题，但指针位置始终是 (-1, -1)。

这里有一些示例代码来演示这个问题：

    var game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
    var triangle;
    var square;
    var isOver;
    var pointerX;
    var pointerY;

    function preload()
    {
        game.load.image( 'triangle', 'assets/triangle.png' );
        game.load.image( 'square', 'assets/square.png' );
    }

    function create()
    {
        triangle = game.add.sprite( 100, 100, "triangle" );
        triangle.inputEnabled = true;
        triangle.input.enableDrag( false, true );

        square = game.add.sprite( 100, 200, "square" );
        square.inputEnabled = true;
    }

    function update()
    {
        isOver = square.input.pointerOver() ? "Yes" : "No";
    }

    function render()
    {
        game.debug.text( "Mouse over square: " + isOver, 200, 100 );
        game.debug.text( "Pointer: (" + game.input.pointer1.x + ", " + game.input.pointer1.y + ")", 200, 116 );
    }

我发现这篇关于使用精灵的 input.priorityID 的帖子：Phaser JS how to stop event Propagation(firing) from textButton.events.onInputDown event to game.input.onDown event?

使用priorityID修复了当三角形在正方形顶部并且三角形没有被拖动时，但是当它被拖动时问题仍然存在。

我如何检测指针何时在精灵上方，即使我正在拖动另一个精灵？

谢谢。

【问题讨论】：

标签： phaser-framework

【解决方案1】：

我最近遇到了类似的问题，希望对您仍然有帮助。

我发现在启动拖动时，除了您拖动的那个之外，所有精灵上的输入都会被禁用。这可能发生在内部，我找不到覆盖它的方法。

我所做的如下：我希望可拖动的所有对象（在我的情况下为 Tile 实例）都保存在 Board 对象中，而 Board 对象又包含对我的 Game 状态的引用。在游戏状态我有一个标志dragIsActive。在对象类本身中我有（TypeScript）

    this.tileSprite.events.onDragStart.add(() => {
        this.parentBoard.gameState.dragIsActive = true;
    });

    this.tileSprite.events.onDragStop.add(() => {
        this.parentBoard.gameState.dragIsActive = false;
    });

等效的 JavaScript 是

    this.tileSprite.events.onDragStart.add(function() {
        this.parentBoard.gameState.dragIsActive = true;
    });

    this.tileSprite.events.onDragStop.add(function() {
        this.parentBoard.gameState.dragIsActive = false;
    });

从对象的构造函数中调用。

在游戏中我有以下内容：

update() {
    if (this.dragIsActive) {        
        var firstTile : Tile = this.game.input.activePointer.targetObject.sprite.parent;

        this.board.tiles.forEach((t : Tile) => {
            if (firstTile.tileSprite.overlap(t.tileSprite)) {
                this.board.tilesToSlide.push(t);
            }
        });

        this.board.tilesToSlide.forEach((tileToSlide) => {
            // Do the processing on that array here.
        });
    }
}

JavaScript（只是 forEach 循环）：

this.board.tiles.forEach(fucntion(t) {
    if (firstTile.tileSprite.overlap(t.tileSprite)) {
        this.board.tilesToSlide.push(t);
    }
});

在我的情况下，检查的是两个精灵重叠，但在你的情况下，您可以检查一个感兴趣的点（例如，您拖动的精灵的位置）是否在另一个精灵的边界内：

if (secondSprite.getBounds().containsPoint(firstSprite.position)) {
    // This should be equivalent to pointerOver() while dragging something.
}

附：我希望您知道精灵的位置在其边界框的左上角，除非明确设置为其他内容。通过sprite.anchor.set(x, y) 设置 - (0, 0) 为左上角（默认）和 (1, 1) - 右下角。

【讨论】：

【解决方案2】：

您也可以使用此方法查看该点是否包含在精灵边界内。

if( Phaser.Rectangle.contains( sprite.body, this.game.input.x, this.game.input.y) ){
    console.log('collide')
}

【讨论】：