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();

    });


}