如何判断旋转了的Sprite被点击

幻の飞鱼

Sprite正常情况下 可以通过X Y ,W H来确定一个RECT，根据鼠标坐标判断是否点击到了

可Sprite加上rotation属性以后就乱了，有什么简单的方法判断是否点击吗

或者类似网页DOM里ONCLICK这种监听的方式？

在野月光族

如果要精确点击的话，感觉做出来都不会简单吧。
记得以前写六角战棋的时候，
判断鼠标是否精确到六角框内还是压线，
用到中心点判断那会儿就很折腾。
不过，MV的Bitmap貌似有取色的指令getPixel(x, y)。
所以如果原图是规则的方块的话，
不妨考虑一下折衷的方法。
比如提取源图的rect，给Sprite分层，
上层是常规图片，底层为对应的填充色。
旋转的时候，两层都同步旋转，
然后提取鼠标点击底层的颜色判断。
当然了，也会有可能出现鼠标点击的位置，
不在sprite或bitmap内而蹦出各种TypeError.....
具体的事宜，就留给楼主安置了，本楼仅作参考。

幻の飞鱼

在野月光族 发表于 2018-4-14 15:21
如果要精确点击的话，感觉做出来都不会简单吧。
记得以前写六角战棋的时候，
判断鼠标是否精确到六角框内还 ...

感谢，确实是一个思路，还有些细节问题我要思考一下可行性

phantomz

PIXI里Sprite类就有containsPoint方法
sprite.containsPoint({x: TouchInput.x, y: TouchInput.y})
此方法可判断旋转，不计算children范围
如果要计算包含children的最小方形可用getBounds()
sprite.getBounds();

汪汪

Sprite.prototype.worldToLocalXY  = function ( x,y,sprite) {
    var node = sprite || this;  
    return node.worldTransform.applyInverse({x:x,y:y},{visible:node.worldVisible});
};



/**
* 是触摸自己
* @param {number} x x坐标
* @param {number} y y坐标
* @param {boolean} type 是否不检查位图(true 为不检查 )
* @param {bolean}c 是否检查子图(true 为 检查 )
*
*
*/
Sprite.prototype.isTouchThis = function (x, y, type, c) {
    if (this.visible) {
        var loc = this.worldToLocalXY(x,y)
        var x = loc.x
        var y = loc.y
        var v = loc.visible
      
        if(v){
            if (c) {
                for (var i = 0; i < this.children.length; i++) {
                    var s = this.children[i]
                    if (s && s.isTouchThis && s.isTouchThis(x, y, type,c)) {
                        return true
                    }
                }
            }

            if (this.isTouchIn && this.isTouchIn(x, y, type)) {
                return true
            }
        }
    }
    return false
}



/**是在之中
* @param {boolean} type 不检查图片
*
*/
Sprite.prototype.isTouchIn = function (x, y, type) {
    if (this.anchor) {
        var x = x + this.anchor.x * this.width
        var y = y + this.anchor.y * this.height
    }
    if (this.isTouchInFrame(x, y, type)) {
        return type || this.isTouchInBitamp(x, y)
    } else {
        return false
    }
}


/**是在区域中 */
Sprite.prototype.isTouchInFrame = function (x, y, type) {
    return x >= 0 && y >= 0 && x < this.width && y < this.height;
};


/**是在位图上不透明点 */
Sprite.prototype.isTouchInBitamp = function (x, y) {
    if (this._realFrame) {
        var x = x + this._realFrame.x
        var y = y + this._realFrame.y
    }
    if (this.bitmap && this.bitmap.getAlphaPixel(x, y)) {
        return true
    }
    return false
}

幻の飞鱼

phantomz 发表于 2018-4-15 02:04
PIXI里Sprite类就有containsPoint方法
sprite.containsPoint({x: TouchInput.x, y: TouchInput.y})
此方法 ...

麻烦再问一句，Sprite的旋转的锚点 是如何指定的呢？
好像是？this.anchor.x this.anchor.y?

shitake

用旋转的时候更新sprite的热区
把aabb换成obb

phantomz

幻の飞鱼 发表于 2018-4-15 17:18
麻烦再问一句，Sprite的旋转的锚点 是如何指定的呢？
好像是？this.anchor.x this.anchor.y? ...

是anchor没错
sprite.anchor.x = 0.5; //0是左边界 1是右边界

也可一行同时指定x、y
sprite.anchor.set(0.5, 0.3); //x = 0.5, y = 0.3

若只带一个参数则xy值相同
sprite.anchor.set(0.5); // x = y = 0.5