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

本节主要讲述对象操作：

首先是变形操作：

function init() {    var canvas = document.getElementById("easel");    // 创建布景对象    var stage = new createjs.Stage(canvas);    // 创建图形对象    var graphics = new createjs.Graphics();    // 创建Shape对象    var shape = new createjs.Shape(graphics);    // 画图    graphics.f("red").r(50, 50, 100, 100);    // 设置shape中的注册点    // 即将regX, regY拉到shape的原点，之后所有的变形操作针对这个进行    shape.regX = 100;    shape.regY = 50;    shape.x = 100;    shape.y = 100;    // 不显示，不会刷新    // alpha=0的对象仍然会刷新    //shape.visible = 0;    // 缩放    //shape.scaleX = .5;    //shape.scaleY = .5;    stage.addChild(shape);    createjs.Ticker.setFPS(20);    createjs.Ticker.addListener(function() {        // 旋转，注意是旋转的shape，绕着regX和regY旋转        shape.rotation += 8;        // 倾斜        shape.skewX += 5;        // 透明        //shape.alpha *= .95;        // 平移        //shape.x++;        stage.update();    })}

接下来是文本操作：

function init() {    var canvas = document.getElementById("easel");    // 创建布景对象    var stage = new createjs.Stage(canvas);    // 创建文本对象    var sentence = new createjs.Text("The quick brown fox jumps over the lazy dog.",                                    "bold 30px Times",                                    "purple");    //sentence.text = "The quick brown fox jumps over the lazy dog.";    //sentence.font = "bold 30px Times";    //sentence.color = "purple";    sentence.x = 160;    sentence.y = 50;    sentence.textAlign = "center";    sentence.lineWidth = 150;    sentence.lineHeight = 150;    sentence.rotation = 30;        stage.addChild(sentence);    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);    // 注意这个路径是相对于html的    var img = new createjs.Bitmap("_image/QQtxtb18.png");        // 将图片放置到正中    img.x = centerX;    img.y = centerY;    // 图片大小是256x256，所以需要设置reg为128x128    img.regX = 128;    img.regY = 128;        img.scaleX = .5;    img.scaleY = .5;        stage.addChild(img);    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);    // 注意这个路径是相对于html的    var img = new createjs.Bitmap("_image/QQtxtb18.png");    // 将图片放置到正中    img.x = centerX;    img.y = centerY;    // 图片大小是256x256，所以需要设置reg为128x128    img.regX = 128;    img.regY = 128;    img.scaleX = .5;    img.scaleY = .5;    stage.addChild(img);    createjs.Ticker.setFPS(30);    createjs.Ticker.addListener(function() {        // 随机动画        //img.x = centerX + Math.random() * 10;        //img.y = centerY + Math.random() * 10;        // 正弦/余弦        img.x = centerX + Math.sin((createjs.Ticker.getTicks() /7) * 2) * 20;        img.y = centerY + Math.cos((createjs.Ticker.getTicks() /7) * 2) * 20;                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, 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() {        stage.update();    });}