EaselJS -岩石教程

特点

图形绘制：提供简单直观的 API 来绘制形状、文本和位图。
动画支持：支持时间轴动画和帧动画。
事件处理：支持鼠标和触摸事件，使图形可以交互。
层次结构：支持显示对象的层次结构，方便管理复杂场景。
高性能：对性能进行了优化，适合实时渲染需求。

安装

可以通过 npm 安装 EaselJS 或直接引入脚本文件。

使用 npm 安装

npm install @createjs/easeljs

直接引入脚本文件

<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>

基本用法

以下是一个基本示例，展示如何使用 EaselJS 在 Canvas 上绘制一个简单的形状：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EaselJS Example</title>
</head>
<body>
    <canvas id="demoCanvas" width="500" height="500"></canvas>
    <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
    <script>
        var stage = new createjs.Stage("demoCanvas");

        var circle = new createjs.Shape();
        circle.graphics.beginFill("red").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;

        stage.addChild(circle);
        stage.update();
    </script>
</body>
</html>

核心概念

舞台（Stage）

Stage 是显示对象的根容器，所有的显示对象都必须添加到 Stage 中。它负责管理和渲染所有的子对象。

var stage = new createjs.Stage("demoCanvas");

形状（Shape）

Shape 是最基本的显示对象，可以用来绘制各种图形。

var shape = new createjs.Shape();
shape.graphics.beginFill("blue").drawRect(0, 0, 100, 100);
stage.addChild(shape);
stage.update();

文本（Text）

Text 用于在 Canvas 上显示文本。

var text = new createjs.Text("Hello EaselJS", "20px Arial", "#ff7700");
text.x = 100;
text.y = 100;
stage.addChild(text);
stage.update();

位图（Bitmap）

Bitmap 用于显示图像。

var bitmap = new createjs.Bitmap("path/to/image.png");
bitmap.x = 100;
bitmap.y = 100;
stage.addChild(bitmap);
stage.update();

事件处理

EaselJS 支持鼠标和触摸事件，可以为显示对象添加事件监听器。

shape.on("click", function(event) {
    alert("Shape clicked!");
});

动画

EaselJS 支持使用 TweenJS 来创建动画效果。以下是一个简单的动画示例：

<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>
<script>
    createjs.Tween.get(circle, { loop: true })
        .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
        .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
        .to({ alpha: 1, y: 225 }, 100)
        .to({ x: 100 }, 1000, createjs.Ease.getPowInOut(4));
</script>

高级用法

显示对象容器（Container）

Container 是一种显示对象，可以包含其他显示对象，形成树状结构。适合用于管理复杂场景。

var container = new createjs.Container();
var shape1 = new createjs.Shape();
var shape2 = new createjs.Shape();

shape1.graphics.beginFill("red").drawCircle(0, 0, 50);
shape2.graphics.beginFill("blue").drawCircle(0, 0, 50);

container.addChild(shape1, shape2);
stage.addChild(container);
stage.update();

形状的复杂绘制

使用 Graphics 类可以进行复杂的图形绘制。

var shape = new createjs.Shape();
shape.graphics.beginStroke("black")
    .beginFill("red")
    .drawCircle(0, 0, 50)
    .beginFill("green")
    .drawRect(50, 50, 100, 100);

stage.addChild(shape);
stage.update();

帧动画（SpriteSheet）

EaselJS 支持使用 SpriteSheet 来创建帧动画。

var spriteSheet = new createjs.SpriteSheet({
    images: ["sprites.png"],
    frames: { width: 50, height: 50 },
    animations: {
        run: [0, 4, "run", 0.2]
    }
});
var animation = new createjs.Sprite(spriteSheet, "run");
stage.addChild(animation);
createjs.Ticker.on("tick", stage);