1 前 言
1.1 CreateJS 介绍
CreateJS 是基于 HTML5 开发的一套模块化的库和工具。
基于这些库,可以非常快捷地开发出基于 HTML5 的游戏、动画和交互应用。A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
包含 4 类工具库
-
EaselJS
提供了一套完整的,层次化的显示列表的互动方式 来更简单的处理 HTML5 画布。 -
TweenJS
类库主要用来调整和动画 HTML5 和 Javascript 属性。提供了简单并且强大的 tweening 接口。 -
SoundJS
提供了简单而强大的 API 来处理音频。通过插件来执行实际的音频实现,无需学习平台相关的知识,简单直接的处理声音。 -
PreloadJS
是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源,例如:图片、文件、音频、数据等等。
1.2 CreateJS 版本
1.2.1 GitHub
地址:https://github.com/CreateJS
以 EaselJS
为例,js
文件存放在 lib
文件中
-
easeljs.js
v0.8.2 带注释版本 -
easeljs.min.js
v0.8.2 不带注释压缩版本,功能不受影响 -
easeljs-NEXT.js
v1.0.0 -
easeljs-NEXT.min.js
v1.0.0
1.2.2 英文
- 网址:https://www.createjs.com/
- API 文档版本为 v1.0.0
1.2.3 中文
- 网址:http://www.createjs.cc/
- API 文档版本为 v0.8.2(以
EaselJS
为例)
2 正 文
由于 createjs
各个库中代码都使用了:
this.createjs = this.createjs || {}
因为这里的 this
并不是挂载在 window
对象上,所以无法直接从 import
中引用。
2.1 方法一
2.1.1 安装 yuki-createjs
GitHub : https://github.com/yuki-torii…
npm i -S yuki-createjs
注意这里下载的版本不是官网最新版本。
2.1.2 使用 yuki-createjs
// include all
import 'yuki-createjs'
// or
require('yuki-createjs')
// include one
import 'yuki-createjs/lib/preloadjs-0.6.2.combined'
// or
require('yuki-createjs/lib/preloadjs-0.6.2.combined')
2.1.3 例 子
// helloworld.vue
<template>
...
<canvas id="idd11" width="500" height="400"/>
...
</template>
<script>
require('yuki-createjs/lib/easeljs-0.8.2.combined')
export default {// 这里主要不能放在 created() 里
mounted(){this.init()
},
methods: {init(){var canvas = document.getElementById('idd11')
var stage = new createjs.Stage(canvas)
var text = new createjs.Text("Hello World!", "36px Arial", "#777")
text.textAlign = "center"
text.x = 100
text.y = 0
stage.addChild(text)
stage.update()},
}
}
</script>
我是直接在 Vue
新建的项目里,HelloWorld.vue
来进行修改,效果图如下:
2.2 方法二
2.2.1 createjs-cmd
npm i -S createjs-cmd
GitHub:https://github.com/yedaodao/c…
同方法一,下载的不是最新版本。
2.2.2 使 用
import createjs from 'createjs-cmd'
2.3 方法三
2.3.1 script-loader
npm i -S script-loader
npm i -S createjs
下载的各个版本都有,可以来引用
1.0.0
版本,但是包含 4 个库npm i easeljs 下载的只包含旧版
2.3.2 使 用
import 'script-loader!createjs/builds/1.0.0/createjs.min.js';
2.4 方法四
2.4.1 @createjs/easeljs
npm i @createjs/easeljs
2.4.2 使 用
import * as createjs from '@createjs/easeljs'
2.0 BETA 版(当前是这样的,由于文章时效性,以后不清楚 ????????????)
2.5 方法五
2.5.1 vue-easeljs
GitHub:https://github.com/dankuck/vu…
具体可参考 GitHub,没有其他参考 API,封装成了标签,感兴趣的可以尝试下
3 总结
列了一个表格将 5 种方法比较一下
序号 | 方法 | 版本 | 推荐 |
---|---|---|---|
一 | yuki-createjs | 旧版 | ✰✰★★★ |
二 | createjs-cmd | 旧版 | ✰✰★★★ |
三 | script-loader | 新旧 | ★★★★★ |
四 | @createjs/easeljs | Beta | ✰✰★★★ |
五 | vue-easeljs | 旧版 | ✰✰✰★★ |
- 类似于
script-loader
还可以使用imports-loader
,但试了几次没成功????????,原谅我太菜了2.0 Beta
版已支持ES6
,相信等正式版出的时候,这个问题就完全不用担心了。
4 后 记
感谢支持。若不足之处,欢迎大家指出,共勉。
如果觉得不错,记得 点赞,谢谢大家 ????
欢迎关注 我的:【Github】【掘 金】【简 书】
本文章采用 知识共享署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议 进行许可。
出处为:https://github.com/xrkffgg/Tools