JavaScript库EASELJS的第一眼映像(三)

本节主要讲述事件交互：

鼠标的坐标可以通过stage取到：

function init() {
    var canvas = document.getElementById("easel");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;

    // 创建布景对象
    var stage = new createjs.Stage(canvas);

    ss = new createjs.SpriteSheet({
        animations: {
            // 定义了动画操作，可以是多个的组合
            fly: [0, 15],
            explode: [16, 20, "fly"]
        },
        images: ["_image/sprite2.png"],
        frames: {
            regX: 50,
            regY: 50,
            height: 100,
            width: 100
        }
    });

    ship = new createjs.BitmapAnimation(ss);
    ship.x = centerX;
    ship.y = centerY;
    ship.gotoAndPlay("fly");

    stage.addChild(ship);


    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(function() {
        ship.x = stage.mouseX;
        ship.y = stage.mouseY;
        
        stage.update();

    });


}

同时鼠标的事件可以通过以下方式获得：

function init() {
    var canvas = document.getElementById("easel");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;

    // 创建布景对象
    var stage = new createjs.Stage(canvas);

    ss = new createjs.SpriteSheet({
        animations: {
            // 定义了动画操作，可以是多个的组合
            fly: [0, 5],
            explode: [2, 5, "fly"]
        },
        images: ["_image/shipsprites.png"],
        frames: {
            regX: 22,
            regY: 33,
            height: 66, // 每个小图的高度
            width: 43   // 每个小图的宽度
        }
    });

    ship = new createjs.BitmapAnimation(ss);
    ship.x = centerX;
    ship.y = centerY;
    ship.gotoAndPlay("fly");


    //
    //ship.onClick = function(e) {
    //    ship.gotoAndPlay("explode");
    //};
    
    ship.onPress = function(e){
        e.onMouseOver = function(ev){
            e.target.x = ev.stageX;
            e.target.y = en.stageY;
        }
    };

    stage.enableMouseOver();
    stage.addChild(ship);
    createjs.Ticker.setFPS(6);
    createjs.Ticker.addListener(function() {
        //ship.x = stage.mouseX;
        //ship.y = stage.mouseY;
        stage.update();
    });


}

不过很遗憾，我在windows下没能调试成功(google chrome浏览器)，没能进入onPress事件处理。。。