Pixi.js在将intel-xdk文件推送后，在iPhone上触摸事件无法触发

Question

Pixi.js在将intel-xdk文件推送后，在iPhone上触摸事件无法触发

javascriptintel-xdkpixi.js

5

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

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

当我通过浏览器测试时，按钮可以正常工作。

它们也可以在intel-xdk的emulate选项卡中正常工作。

但是当我进入test选项卡，推送文件，扫描QR码打开在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>

- James May

“不工作”是指当您点击它们时什么都没有发生？ - Karmacon

是的，事件没有触发。我已经纠正了问题。 - James May

图片在哪里？它们的尺寸是多少？button.png和button2.png。 - krisrak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- krisrak · Accepted Answer

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上看到它工作。