CraftyJS 學習二 -- Event

Event 事件系統

Crafty 使用 Event 來完成消息傳遞。

基本思想就是，爲實體綁定事件，而後在其餘地方觸發事件，事件被當即執行。

// Create a red squarevar square = Crafty.e("2D, Canvas, Color")
        .attr({x:10,y:10, w:30, h:30})
        .color("blue");// When a "Blush" event is triggered, turn pinksquare.bind("Blush", function() {    // the function will be called in the context of the entity
    this.color("pink")
});// Trigger the event, causing the square to turn pinksquare.trigger("Blush");

上面代碼中演示瞭如何綁定代碼並當即觸發它。

傳遞數據

例如，咱們定義一個 ChangeColor 事件

square.bind("ChangeColor", function(color) {    this.color(color);
});

square.trigger("ChangeColor", "pink"); // Turn pink

當你使用 trigger 方法觸發事件時，第二個參數將做爲事件的參數傳遞到對象中。此外，還能夠定義更復雜的參數類型，例如：

// Assume that color is an objectsquare.bind("ChangeColor", function(color) {    this.color(color.r, color,g, color.b);
})// Specify the RGB values corresponding to pinksquare.trigger("ChangeColor", {r:255, g:192, b:203});

解綁事件

用綁定事件的引用去解綁事件，因此當須要解綁時，儘可能不要使用匿名方法。

var turnPink = function() { 
    this.color("pink");
}// Bind the function to an eventsquare.bind("Blush", turnPink);// Immediately unbind it!square.unbind("Blush", turnPink);

固然，若是你只但願事件被執行一次，可使用 one 方法替代 trigger。

// Use the .one() method instead of .bind()square.one("JumpRight", function() {    // Move 10 px to the right
    this.x += 100;
});// If we trigger the event twice, the bound function will be called only the first timesquare.trigger("JumpRight");
square.trigger("JumpRight");

使用內置事件

Crafty 內置了不少事件，經常使用的如 2D 組件中的 「Move」 事件，每當對象的位置發生變化，這個事件都會被觸發，事件參數包含了其移動前得位置。

// Bind a function to the "Move" event// It will log the initial and new x position anytime the entity movessquare.bind("Move", function(oldPosition) {    console.log(oldPosition._x, this.x);
});

square.x = 100; // Will print "10, 100"

在 Grafty API 中，綠色高亮部分都是內置 Crafty 事件

全局事件

咱們關心的全部的事件都最終被定位到某個具體對象，同時，事件也能夠是全局的，觸發它會影響到每個對象。

// Define two entities at x=5 and x=10var varrick = Crafty.e("2D").attr({x:5});var xhuli = Crafty.e("2D").attr({x:10});// Bind to an event called "Thing"varrick.bind("Thing", function() { this.x += 20; });
xhuli.bind("Thing", function() { this.x += 10; });// Do the thing!// varrick and xhuli will *both* move to the rightCrafty.trigger("Thing");// You can still trigger the same events directly on an entityxhuli.trigger("Thing");

咱們也能夠直接將事件綁定到 Crafty 上。

Crafty.bind("Thing", function() {    console.log("Crafty does the thing.")
});

這個方法的上下文既是 Crafty 對象自己 (this === Crafty)。

Crafty 對象同時也包括了 Crafty.unbind() 和 Crafty.one() 方法。

"EnterFrame" 時 Crafty 中的一個很重要的事件，之後會作重點介紹。