vue/react和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();
});

评论

0条评论

发表评论

电子邮件地址不会被公开。