createjs技术博客

更新============》

因为npm install 会丢掉createjs前缀，而导致animateCC文件不可用（改造太麻烦），所以改成直接在项目引入即可，下面是我改造过后的文件。

文件地址：https://www.ajexoop.com/lib/export-createjs/createjs.js

文件保存在自己的项目后import，js项目ts项目都可以按照原来的方法用，ts也无需改变文件类型。

代码示例：

<template>
<div class="page">
  <canvas id="testCanvas" width="1000" height="600"></canvas>
</div>
</template>

<script lang="ts" setup>
import {createjs} from "@/utils/createjs/createjs";
import {onMounted} from "vue";
const init = () =>{
  const canvas = document.getElementById("testCanvas");
  const stage = new createjs.Stage(canvas);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick",stage);

  let shape = new createjs.Shape();
  shape.graphics.beginFill('#ff0000').drawRect(0,0,100,100).endFill();
  stage.addChild(shape);
}
onMounted(()=>{
  init();
})
</script>

<style scoped>

</style>

因为createjs本质是js，所以放在ts也不用写类型，没关系的。

下面的用法可以无视了《=============================

随着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();
});