2015-12-13 15 views
5

Ho creato un piccolo progetto di test per replicare il problema. Il progetto contiene solo pixi.min.js e index.html con il codice di questo esempio:Gli eventi tocco Pixi.js non si attivano su iPhone dopo aver premuto i file intel-xdk

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

pulsanti funzionano quando prova tramite il browser. Funzionano anche nella scheda intel-xdkemulate.

Ma quando si passa alla scheda test, file push, scansione codice QR per aprire l'app creata sull'iPhone, i pulsanti appaiono ma gli eventi tocco non funzionano.

Perché gli eventi tattili non si attivano su 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> 
+0

Con 'non funziona', vuoi dire non accade nulla quando li si tocca? – Karmacon

+0

Sì, gli eventi non sparano. Ho corretto la domanda. –

+0

dove sono le immagini? Che taglia sono? button.png e button2.png – krisrak

risposta

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'); 

Si sta lavorando su iPhone, ma non si è visto nulla succedere perché tu hai l'immagine del pulsante iniziali textureButton e textureButtonDown stesso (button.png). Quindi non vedi alcuna differenza sullo schermo quando lo tocchi. Su iPhone non v'è alcuna hover evento per il tocco evento, in modo che il textureButtonOver non viene applicato

Ma quando u prova su emulatore, si utilizza il mouse, in modo che quando u spostare il mouse sul pulsante textureButtonOver viene applicata e u vedere un cambiamento sullo schermo.

Quindi modificare il textureButtonDown ad una diversa immagine (button3.png) e u vedrà funziona su iPhone

+0

Ho appena usato il tuo codice e cambiato button3.png e ha funzionato sul mio iPhone – krisrak

+1

Che bello. Non sono sicuro di quanto mi sia mancato :) Grazie per il tuo aiuto. –