Javascript tweed Kinetic.js形状不会触发大多数单击

目的

我正在制作一个简单的文字游戏，用户需要点击一些带有文字的移动矩形来拍摄它们

问题

因此，我创建了一些对象，并使用simple kinetic.js tweening移动它们

造词

函数createWordvalue{

//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; 
}

粗花部

但问题是，点击事件不会在大量用户点击时触发。我认为，这是由tweening机制中延迟的drawHit调用造成的，该机制在更新命中区域之前绘制新的对象位置，因此当我们拍摄对象时，认为我们击中了它的当前位置，我们错过了，因为它的命中区域仍然具有相同的旧位置。

实例

---

在拍摄过程中花一分钟时间来观察这种效果

通过聆听画布的触碰，并检查指针是否与目标单词rect发生碰撞，而不是使用自己的onclick事件，从而解决了这种奇怪的行为

//我听canvas是因为我的应用程序特定，你可以简单地听你自己的图层甚至文档

$canvas.bind'click'，functionevent{

        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;
            }    
        }
}

        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;
            }    
        }
}