Tweened Kinetic.js形狀不會觸發大多數點擊

Question

目的

我正在制作一個簡單的“射擊單詞”游戲，用戶需要單擊一些帶有單詞的移動矩形以“射擊”它們。

問題

因此，我創建了一些對象並使用簡單的dynamic.js補間移動它們。

造詞

函數createWord（value）{

 //here comes some word object construction var wordGroup = new Kinetic.Group({ x: 0, y: 0 }); var padding = 10; wordGroup.label = new Kinetic.Text({ x: padding, y: padding, text: value, fontFamily: 'Times New Roman', fontSize: 30, fill: 'white' }); wordGroup.tag = new Kinetic.Rect({ x: 0, y: 0, width: wordGroup.label.width() + (padding << 1), height: wordGroup.label.height() + (padding << 1), fill: 'black', shadowColor: 'black', shadowBlur: 10, shadowOffset: {x:10,y:20}, shadowOpacity: 0.5, cornerRadius: 10 }); wordGroup.add(wordGroup.tag); wordGroup.add(wordGroup.label); wordGroup.shoot = function(){ //shooting mechanism (simple stop from moving and remove from scene) wordGroup.tween.pause(); wordGroup.clean(); dropNextWord(); //drops fresh blood! (new word instead of shooted) } wordGroup.clean = function(){ //remove from scene and set it free to drop again wordGroup.remove(); wordGroup.isActive = false; } wordGroup.move = function(callback){ //animates word wordLayer.add(wordGroup); moveToSide(wordGroup, callback); //calls moving function } wordGroup.on('click', function(e){ wordGroup.shoot(); }); return wordGroup; } 

補間部分

//move word to opposite side
function moveToSide(word, callback){
    var side = Math.random();

    var d = 100;

    spawnFromSide(word, side); //set random side word position

    tweenPosition = {
        x: word.x(),
        y: word.y()
    }

    if(side < 0.25){ //left
        tweenPosition.x = - d;
    } else if(side > 0.25 && side < 0.5){ //right
        tweenPosition.x = defaultStageWidth + d;
    } else if(side > 0.5 && side < 0.75){ //up
        tweenPosition.y = - d;
    } else { //down
        tweenPosition.y = defaultStageHeight + d;
    }

    word.tween = new Kinetic.Tween({
        node: word,
        duration: 4,
        easing: Kinetic.Easings.Linear,
        x: tweenPosition.x,
        y: tweenPosition.y,
        onFinish: function(){
            word.clean();
            callback();
        }
    });

    word.tween.play();
}

但是問題在於，點擊事件不會在大量用戶點擊上觸發。 我認為，這是由補間機制內部的drawHit（）調用延遲引起的，它在更新命中區域之前繪制了新的對象位置，因此當我們拍攝對象以為達到其當前位置時，我們會錯過它，因為它的命中區域仍然具有相同的舊位置。

現場例子

http://jsfiddle.net/hd6z21de/7/

花點時間看一下這種效果

Answer 1

通過偵聽畫布觸摸並檢查指針是否由我自己碰到某些目標單詞而不是使用自己的onclick事件來解決此怪異行為。

//由於我的應用特定，我聽畫布，您可以簡單地聽自己的圖層甚至文檔

$（“ canvas”）。bind（'click'，function（event）{

  var x = (event.pageX) / stage.scaleX(); //you don't need to divide by scale if your stage isn't scaled as mine does var y = (event.pageY) / stage.scaleY(); var wordArray = wordGroup.getChildren(); for(var i = 0; i < wordArray.length; i++){ //go through all words and check if we shoot someone (is mouse position included in some word rect) if(x > wordArray[i].x() && y > wordArray[i].y() && x < (wordArray[i].x() + wordArray[i].width()) && y < (wordArray[i].y() + wordArray[i].height())){ wordArray[i].shoot(); //shoot that word break; } } }