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

来源：互联网发布：java执行另一个项目编辑：程序博客网时间：2024/05/17 13:08

本节主要讲述事件交互：

鼠标的坐标可以通过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事件处理。。。