CreateJS 笔记

2016-10-04

A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.

# EaselJS

http://www.createjs.cc/src/docs/easeljs/classes/EaselJS.html (opens new window)

# 绘制矢量图形

var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);

// 交替使用也可以使用 Shape 类的图形属性渲染上面一样。
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);

1
2
3
4
5
6

# 蒙版

xxx.mask = shape 可以以 shape 的区域建立蒙版

# 层级

EaselJS 中没有类似 CSS 中的 z-index 概念，可以通过 Container 的方法设置 child 的 index。

getChildIndex(child);
setChildIndex(child, index);

1
2

# 获取图形边界

var b = xxx.getBounds();

可以获得 b.x, b.y, b.width, b.height

# 预加载（preload）

var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.on("progress", handleProgress, this);

queue.installPlugin(createjs.Sound);
queue.loadManifest(resList);

1
2
3
4
5
6

# 声音（sound）

// 这里 audio 是 preload 中自定义的名字
var bgm = createjs.Sound.play("audio");
bgm.on(
  "complete",
  function() {
    bgm.play();
  },
  this,
);

1
2
3
4
5
6
7
8
9