Question

我创建了一个小型测试项目来复制问题。该项目仅包含pixi.min.js和index.html，其中包含此示例中的代码：

http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity

当我通过浏览器测试时按钮工作。它们也适用于intel-xdk emulate标签。

但是当我转到test标签，推送文件，扫描二维码以打开iphone上创建的应用程序时，会出现按钮，但触摸事件无效。

为什么触摸事件不会在iPhone上触发？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:0; padding: 0; background: #333333;">
    <script src="pixi.min.js"></script>
    <script>
        var renderer = PIXI.autoDetectRenderer(800, 600);
        document.body.appendChild(renderer.view);

        var stage = new PIXI.Container();

        var textureButton = PIXI.Texture.fromImage('images/button.png');
        var textureButtonDown = PIXI.Texture.fromImage('images/button.png');
        var textureButtonOver = PIXI.Texture.fromImage('images/button2.png');

        var buttons = [];

        var buttonPositions = [
            175, 75,
            655, 75,
            410, 325,
            150, 465,
            685, 445
        ];

        var noop = function () {
            //console.log('click');
        };

        for (var i = 0; i < 5; i++)
        {
            var button = new PIXI.Sprite(textureButton);
            button.buttonMode = true;

            button.anchor.set(0.5);

            button.position.x = buttonPositions[i*2];
            button.position.y = buttonPositions[i*2 + 1];
            button.interactive = true;

            button.on('mousedown', onButtonDown)
                .on('touchstart', onButtonDown)
                .on('mouseup', onButtonUp)
                .on('touchend', onButtonUp)
                .on('mouseupoutside', onButtonUp)
                .on('touchendoutside', onButtonUp)
                .on('mouseover', onButtonOver)
                .on('mouseout', onButtonOut);

            button.tap = noop;
            button.click = noop;
            stage.addChild(button);
            buttons.push(button);
        }
        buttons[0].scale.set(1.2);
        buttons[2].rotation = Math.PI / 10;
        buttons[3].scale.set(0.8);
        buttons[4].scale.set(0.8,1.2);
        buttons[4].rotation = Math.PI;

        animate();

        function animate() {
            renderer.render(stage);
            requestAnimationFrame(animate);
        }

        function onButtonDown(){
            this.isdown = true;
            this.texture = textureButtonDown;
            this.alpha = 1;
        }

        function onButtonUp(){
            this.isdown = false;
            if (this.isOver){ this.texture = textureButtonOver;
            }else{ this.texture = textureButton; }
        }

        function onButtonOver(){
            this.isOver = true;

            if (this.isdown){
                return;
            }
            this.texture = textureButtonOver;
        }

        function onButtonOut(){
            this.isOver = false;
            if (this.isdown){ return; }
            this.texture = textureButton;
        }
    </script>
</body>
</html>

Answer 1

var textureButton = PIXI.Texture.fromImage('images/button.png');
var textureButtonDown = PIXI.Texture.fromImage('images/button.png');
var textureButtonOver = PIXI.Texture.fromImage('images/button2.png');

它正在iPhone上运行，但由于您的初始按钮图像textureButton和textureButtonDown相同（button.png），因此您看不到任何事情。因此，当您触摸它时，您在屏幕上看不到任何差异。在iPhone上，触摸事件没有hover事件，因此未应用textureButtonOver

但是当你在模拟器上测试时，你正在使用鼠标，所以当你将鼠标移到按钮textureButtonOver上时，你会看到屏幕上的变化。

所以将textureButtonDown更改为其他图片（button3.png），你会看到它在iPhone上运行

推送intel-xdk文件后，Pixi.js触摸事件没有在iPhone上触发

1 个答案: