5
問題を再現するための小さなテストプロジェクトを作成しました。 プロジェクトは、この例からのみpixi.min.jsとコードとのindex.htmlが含まれています。私は、ブラウザ経由でそれをテストするときintel-xdkファイルをプッシュした後、Pixi.jsタッチイベントがiPhoneで起動しない
http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity
ボタンが働きます。 intel-xdkemulateタブでも動作します。
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>
に取り組む表示されます、あなたがそれらをタップすると何も起こりません意味ですか？ – Karmacon
はい、イベントは発生していません。私はその問題を修正した。 –
画像はどこですか？彼らはどんなサイズですか？ button.pngとbutton2.png – krisrak