制作動畫或小游戲——CreateJS事件（二）

在Canvas中如果要添加事件，就需要計算坐標來模擬各種事件，而EaselJS中已經封裝好了多個事件，只需調用即可。

一、事件

1）點擊

事件是綁定在Shape類中的，click事件與DOM中的意思是一樣的，還有個雙擊事件dblckick，完整的代碼可以查看這里。

var object = new createjs.Shape();
object.addEventListener('click', function(e) {
    alert('click');
});

可以用addEventListener來做綁定，如果想要讓移動端也支持，就需要在Touch類中調用enable方法。

createjs.Touch.enable(stage);

除了click外，還有好多其它方法，Shape類的所有事件如下：

 

2）移動

在CSS中有一個“:hover”的偽類，通過這mouseover和mouseout兩個事件可以模擬出這個效果。

首先要設置允許觸發，引用stage類中的enableMouseOver方法，完整的代碼可以在這里查看到。

stage.enableMouseOver();

circle.addEventListener("mouseover", function(e) {
    circle.alpha = .5;
    stage.update();
});
circle.addEventListener("mouseout", function(e) {
    circle.alpha = 1;
    stage.update();
});

 

有兩個事件與這兩個比較類似，rollover和rollout，有兩個地方與上面的兩個事件不同。

1. 這兩個事件不冒泡

2. 當給Container設置四個事件后，只有當離開容器時觸發rollout，進入容器時rollover，而在容器中的子元素進入或離開會分別觸發mouseover和mouseout。

下面gif圖是一次鼠標移動的過程，總共打印出了四組數據，詳細代碼可以查看這里。

第一次：是從外面進入藍色區域。

第二次：是從藍色區域進入紅色區域。

第三次：是從紅色區域進入藍色區域。

第四次：是從藍色區域進入到外面。

 

3）拖放

並沒有專門的拖放事件，但是可以通過其它事件來模擬。

Shape類中有個mousedown事件，鼠標按下，在這個事件內綁定Stage類的stagemousemove與stagemouseup，

  circle.addEventListener('mousedown', function(e) {
    stage.addEventListener('stagemousemove', function(e) {
      circle.x = stage.mouseX;
      circle.y = stage.mouseY;
    });
    stage.addEventListener('stagemouseup', function(e) {
      e.target.removeAllEventListeners();
    });
  });

完整的代碼可以在這里查看，e.target就是canvas對象，內容如下：

Stage類中全部事件如下：

 

二、顏色拖放小游戲

可以通過上面這些事件制作一個簡單的顏色拖放小游戲，詳細的代碼可以查看這里。

下面是一個片段：

function startDrag(e) {
  var shape = e.target;
  var slot = slots[shape.key];
  stage.setChildIndex(shape, stage.getNumChildren() - 1);
  stage.addEventListener('stagemousemove', function(e) {
    shape.x = e.stageX;
    shape.y = e.stageY;
  });
  stage.addEventListener('stagemouseup', function(e) {
    stage.removeAllEventListeners();
    var pt = slot.globalToLocal(stage.mouseX, stage.mouseY);
    if (slot.hitTest(pt.x, pt.y)) {
      shape.removeEventListener("mousedown", startDrag);
      score++;
      createjs.Tween.get(shape).to({
        x: slot.x,
        y: slot.y
      }, 200, createjs.Ease.quadOut).call(checkGame);
      console.log('h');
    } else {
      createjs.Tween.get(shape).to({
        x: shape.homeX,
        y: shape.homeY
      }, 200, createjs.Ease.quadOut);
    }
  });
}

 

1）事件中的e

Shape類中的 stagemousemove和stagemouseup事件內的參數“e”是一個MouseEvent對象，“stageX”與“stageY”指的是鼠標在畫布上的位置。

 

2）setChildIndex

Stage類中的setChildIndex這個應該與CSS中的“z-index”類似，就是為了不被覆蓋住，拖動黃色塊的時候，能將靜止的塊覆蓋。

 

3）globalToLocal

Shape類中globalToLocal方法是做坐標轉換，上面的代碼是將鼠標的X和Y坐標轉換相對於圖形的坐標。

第一張圖中：藍色邊框左上角的點相對畫布原點是(50,30)

第二張圖中：將鼠標移動到了(0,8)的位置

第三張圖中：a就是經過計算后坐標點(0-50,8-30)

 

4）hitTest

hitTest測試圖像是否與顏色相同的框有交集，並且交集要過了邊框的中心點才返回true。

第一張圖：過了中心點；第二張圖：是沒過中心點

 

三、Text

1）創建文本

在Canvas上可以畫出文字，在CreateJS中同樣可以，並且還封裝了很多方法，將會使用text類。

var text = new createjs.Text("Game Over", "20px Arial", "#ff7700");
text.textBaseline = "middle";
text.textAlign = "center";
stage.addChild(text);

完整的代碼可以在這里查看。通過畫字，就可以模擬超鏈接了，還能把“:hover”通過事件模擬出來。

 

2）DOMElement類

CreateJS還能將canvas外面的DOM元素添加進來，完整的代碼可以在這里查看。

<div id="gameHolder">
    <div id="instructions" style="width: 400px;height: 300px;border: dashed 2 #008b8b;text-align: center;visibility: hidden">
        <h3 style="font-family:arial;">Game Instructions</h3>
        <p><strong>Click</strong> on the <span style="color:red">RED</span> balloons as they fall from the sky.</p>
        <a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick</a>
    </div>

    <canvas id="canvas" width="500" height="400" style="border: black solid 1px"></canvas>
</div>

與上面的創建文本類似，也是初始化后，添加多個屬性。

var de = new createjs.DOMElement(instructions);
de.alpha = 0;
de.regX = 200;
stage.addChild(de);