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