我创建了一个小测试项目来复制该问题。
该项目仅包含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>
最佳答案
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上可以正常使用