createjs技术博客

随着vue和react的兴起，越来越多的前端项目会使用工程化node+前端引擎的方式制作，那么createjs和这些引擎的协作我今天就来分享一下。

东西不多很简单，首先是npm：

npm install @createjs/easeljs --save

npm install @createjs/tweenjs --save

npm install @createjs/core --save

然后是代码示例：

import { Stage, Shape } from "@createjs/easeljs";
let stage = new Stage("myCanvas");
let shape = new Shape();
shape.graphics.beginFill("red").drawRect(0, 0, 120, 120);
stage.addChild(shape);
stage.update();

import { Sprite, SpriteSheet, Ticker } from "@createjs/easeljs";
let ss = new SpriteSheet({
  frames: {
    width: 32,
    height: 64,
    numFrames: 19
  },
  animations: {run: [0, 25], jump: [26, 63, "run"]},
  images: ["./assets/runningGrant.png"]
});
 
let sprite = new Sprite(ss, "run");
sprite.scaleY = sprite.scaleX = 0.4;
stage.addChild(sprite);
 
sprite.on("click", evt => sprite.gotoAndPlay("jump"));
 
Ticker.on("tick", stage);

import { Tween } from "@createjs/tweenjs";
let tween = Tween.get(target)
    .to({ x: 300 }, 400)
    .set({ label: "hello!" })
    .wait(500)
    .to({ alpha: 0, visible: false }, 1000)
    .call((p1, p2) => { ... }, [ 10, true ]); // p1 === 10, p2 === true, this === target

记得vue/react只负责提供一个canvas就够了，然后侦听或者调用方法的时候可以用新的 ()=> 的模式保证this（vue可以直接调用methods里的方法，this不会变）
上面方法createjs2.0的（没错其实2年前就有2.0了，但是还在测试阶段，然后制作组做别的项目去了），如果有问题可以试试用下面的版本

$ npm install node-easel

//Import easel
require('node-easel');
var Stage = createjs.Stage;
var Shape = createjs.Shape;
var Graphics = createjs.Graphics;

var fs = require('fs');

//Create the canvas to draw to
var c = new Canvas(980, 580);
var ctx = c.getContext('2d');

//Create graphics object
var g = new createjs.Graphics();
var shape = new createjs.Shape(g);

//Draw a circle
g.setStrokeStyle(8)
.beginStroke("#F0F")
.beginRadialGradientFill(["#FF0","#00F"],[0,1],100,200,0,100,200,40)
.drawCircle(100,200,40);

//Add the item to our stage, and call .tick(); to draw the object.
var stage = new createjs.Stage(c);
stage.addChild(shape);
stage.tick();

//Create a PNG file.
fs.writeFile(__dirname + '/public/circle.png', c.toBuffer(), function() {
	createjs.Ticker.halt();
});