pixijs mousedownイベントが動作しない（すべてのバージョン）

Question

私のクリックイベントは、どのバージョンでも動作していないため、実際には解決策が見つかりません。

好奇心をそそる問題は、私がmousemoveとmousemoveを入れ替えると、イベントがpixijs canvasに正しく入ることを意味しますが、私のプロジェクトではmousemoveはオプションではありません。

ここに関連するコードです：

// This function gets called from somewhere else 
 
var new_word = getRandomWord(); 
 
var color = new_word == currentWord ? 0xffffff : 0xffffff; 
 
var fontSize = isSmallScreen ? Math.round(Math.random() * 10 + 10) : Math.round(Math.random() * 40 + 20); 
 
var creationPadding = isSmallScreen ? 0 : 200; 
 
var text = new PIXI.Text(new_word, { 
 
      font: fontSize + 'px Clarendon', 
 
      fill: color, 
 
      dropShadow: !isTouchDevice, 
 
      dropShadowColor: 0xffffff, 
 
      dropShadowDistance: 0, 
 
      dropShadowBlur: 8, 
 
      dropShadowAlpha: .2, 
 
      padding: 5, 
 
      align: 'left' 
 
     }); 
 
text.pivot.set(text.width/2, text.height/2); 
 
text.position.x = getRandomArbitrary(creationPadding, renderer.width - creationPadding); 
 
text.position.y = getRandomArbitrary(0, renderer.height - beer.position.y - 156); 
 
text.rotation = degToRad(getRandomArbitrary(-20, 20)); 
 
text.interactive = true; 
 
currentlyShownWords.push(text._text); 
 

 
text.on('mousedown', function (e) { 
 
    alert('mousedown'); 
 
    if (inGame) { 
 
     e.stopPropagation(); 
 
     if (text._text == currentWord) { 
 
      clickedCorrectWord(text); 
 
     } else { 
 
      clickedWrongWord(text); 
 
     } 
 
    } 
 
});

Answer 1

は、あなたが正しいルックスを示しているものから、あなたのコード内の他のエラーがないこと、よろしいです。

私はここで見ているもののフィドルを作成：https://jsfiddle.net/6bydjrpo/

var stage = new PIXI.Stage(0x97c56e, true); 
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); 

var text = new PIXI.Text('Click me!', { 
    font: '48px Clarendon', 
    fill: 0xffffff, 
    dropShadowColor: 0xffffff, 
    dropShadowDistance: 0, 
    dropShadowBlur: 8, 
    dropShadowAlpha: .2, 
    padding: 5, 
    align: 'left' 
}); 

text.pivot.set(text.width/2, text.height/2); 
text.position.x = renderer.width/2; 
text.position.y = renderer.height/2; 
text.rotation = 0; 
text.interactive = true; 
stage.addChild(text); 

text.on('mousedown', function (e) { 
    alert('mousedown'); 
}); 

function animate() { 
    renderer.render(stage); 
    requestAnimationFrame(animate); 
} 

document.body.appendChild(renderer.view); 
renderer.view.style.position = "absolute"; 
renderer.view.style.top = "0px"; 
renderer.view.style.left = "0px"; 
requestAnimationFrame(animate);