問題在調用函數時調用

點擊畫布內部時，它會生成一個球並移動到點擊位置當球到達它的位置時我希望它自己移除。但我認爲我在調用removeBall（）函數時遇到問題。問題在調用函數時調用

你可以找到一個工作示例她：jsfiddle

/* 
    * Main app logic 
    */ 
    function Main() { 
    this.canvas = "canvas"; 
    this.stage = null; 
    this.WIDTH = 0; 
    this.HEIGHT = 0; 
    this.init(); 
    } 

    Main.prototype.init = function() { 
    console.clear(); 
    this.stage = new createjs.Stage(this.canvas); 
    this.resize(); 
    //start game loop 
    createjs.Ticker.setFPS(30); 
    createjs.Ticker.addEventListener("tick", this.gameLoop); 
    //click event handler 
    this.stage.on("stagemousedown", function(evt) { 
     main.fireBall(evt); 
    }); 
    }; 

    Main.prototype.fireBall = function(evt) { 
    var bal = new Bal(evt.stageX, evt.stageY); 
    }; 

    Main.prototype.resize = function() { 
    //resize the canvas to take max width 
    this.WIDTH = window.innerWidth; 
    this.HEIGHT = Math.floor(window.innerWidth * 9/16); 
    this.stage.canvas.width = this.WIDTH; 
    this.stage.canvas.height = this.HEIGHT; 
    }; 

    Main.prototype.gameLoop = function() { 
    //game loop 
    main.stage.update(); 
    }; 

    /* 
    * Ball logic 
    */ 
    function Bal(toX, toY) { 
    this.toX = toX ; 
    this.toY = toY; 
    this.widthPerc = 8; 
    this.init(); 
    } 

    Bal.prototype.width = function() { 
    return Math.floor(main.stage.canvas.width/100 * this.widthPerc); 
    }; 

    Bal.prototype.init = function() { 
    //create a new ball 
    this.ball = new createjs.Shape(); 
    this.ball.graphics.beginFill("green").drawCircle(0, 0, this.width()); 
    this.ball.x = (main.stage.canvas.width/2) - (this.width()/2); 
    this.ball.y = main.stage.canvas.height - 20; 
    main.stage.addChild(this.ball);  
    this.move(); 
    }; 

    Bal.prototype.move = function() { 
    //create a tween to cliked coordinates 
    createjs.Tween.get(this.ball).to({ 
     x: this.toX , 
     y: this.toY , 
     scaleX:0.4,scaleY:0.4, 
     rotation: 180 
     }, 
     750, //speed 
     createjs.Ease.none 
    ).call(this.removeBall); // <---- How can i pass the correct scope to the called function? 
    }; 

    Bal.prototype.removeBall = function() { 
    //try to remove the ball 
    main.stage.removeChild(this.ball); 
    }; 

    var main = new Main();

來源

2014-03-06 Kozmk12

好找到了解決辦法！使用bind（）功能。

Bal.prototype.move = function() { 
    console.log(this.toX +","+this.toY); 
    createjs.Tween.get(this.ball).to({ 
     x: this.toX , 
     y: this.toY , 
     scaleX:0.4,scaleY:0.4, 
     rotation: 180 
    }, 
    750, //speed 
    createjs.Ease.none 
).call(this.removeBall.bind(this)); 
};

來源

2014-03-06 09:47:04 Kozmk12

'animationDone'在你的問題中根本不存在。 – thefourtheye

我的不好，修正了錯字。 – Kozmk12

上面的解決方案使用綁定工作，但有一個更好的解決方案。綁定不適用於所有瀏覽器（最顯着的是Safari 5.1，這是一款現代瀏覽器）。 http://kangax.github.io/es5-compat-table/#Function.prototype.bind

TweenJS在使用call()時內置了對範圍函數的支持。只需將範圍作爲第三個參數傳遞即可。

Ball.prototype.move = function() { 
    console.log(this.toX +","+this.toY); 
    createjs.Tween.get(this.ball).to({ 
     x: this.toX , 
     y: this.toY , 
     scaleX:0.4,scaleY:0.4, 
     rotation: 180 
    }, 
    750, //speed 
    createjs.Ease.none 
).call(this.removeBall, null, this); 
};

您也可以傳遞一個函數參數數組作爲第二個參數。

Tween.call(this.removeBall, [this.ball], this);

來源

2014-03-06 15:48:54 Lanny

問題在調用函數時調用

回答

相關問題