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

Question

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

Jam*_*May 5 javascript intel-xdk pixi.js

我创建了一个小型测试项目来复制问题.该项目仅包含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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kri*_*rak 2

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

Run Code Online (Sandbox Code Playgroud)

它可以在 iPhone 上运行，但您没有看到任何事情发生，因为您有初始按钮图像textureButton和textureButtonDown相同的 ( button.png)。因此，当您触摸屏幕时，您不会在屏幕上看到任何差异。在 iPhone 上没有hover触摸事件的事件，因此textureButtonOver不应用

但是当您在模拟器上测试时，您正在使用鼠标，因此当您将鼠标移动到按钮上时textureButtonOver，您会在屏幕上看到变化。

因此，将更改textureButtonDown为不同的图像 ( button3.png)，您将看到它在 iPhone 上运行

归档时间：	10 年，9 月前
查看次数：	628 次
最近记录：	10 年，8 月前