Chaos
chaos是一个canvas的应用框架，主要实现canvas的图片组件的渲染和移动端的布局兼容性。可实现对组件的点击事件的逻辑处理。可用于一些小游戏的开发。
特性
- 全局数据管理
- 浏览器布局自适应
- 图片资源加载起
- 组件话
- 状态保存和恢复
待完善
- 全局状态管理的重构（状态机）
- 应用的快照和恢复
- 更多组件的封装
立即体验
下载
npm install @jslq/chaos --save构造函数
let chaos = new Chaos({
debug: process.env.NODE_ENV === 'development',
ratio: 3,
globalData: {},
success: () => {},
error: () => {}
})参数
debug
开启chaos提示
ratio
在移动端，canvas绘制图形和图片的时候会有锯齿，所有需要放大倍数
globalData
应用的全局数据管理，可在组件内部读取和设置
success
挂载成功了调用
error
加载失败后调用
方法
加载图片资源
chaos.loadImages({
image1: 'http://abc.image.com/images1',
imageList: ['http://abc.image.com/images1', 'http://abc.image.com/images2']
})方法返回chaos自身，加载图片资源，会缓存在chaos的_loader对象中
挂载canvas
chaos.mount('#container')方法返回chaos自身，将canvas的dom对象append到#container里
使用组件
chaos.use('componentName', ImageComponent({}))组件
图片组件
使用
import { ImageComponent } from '@jslq/chaos'
game.use('adsense3', ImageComponent({
scope: '',
x(w, h, $data) {
},
y(w, h, $data) {
},
w(w, h, $data) {
},
h(w, h, $data) {
},
operate(w, h) {
console.log(this)
},
draw(ctx, w, h, ratio, $data) {
}
})可传入参数
scope: 对应图片资源加载器的key值
x: <number | function >图片组件的x坐标， 可传入具体值，或者函数，函数包含w, h, $data三个参数
w: canvas的逻辑像素宽度(不受ratio影响，实际宽度为w * ratio,在框架内部做转化处理)
h: canvas的逻辑像素高度
$data: 即globalData
y: 图片组件的y坐标，其余同x
w: 图片组件的逻辑像素宽度，其余同x
h: 图片组件的逻辑像素高度，其余同x
operate: 组件每一帧渲染时会处理里面的逻辑，可以在函数内部对组件的x, y进行运算，函数内部this指向该图片组件，同时拥有w, h参数
draw: 每个图片组件都有内部的绘制函数，默认使用x, y, w, h的返回值在canvas图层上绘制，函数内部this指向该图片组件，如果需要添加自己的绘制逻辑，有以下形参
ctx: canvas的上下文对象
w: canvas的逻辑像素宽度(不受ratio影响，实际宽度为w * ratio,在框架内部做转化处理)
h: canvas的逻辑像素高度
ratio: 由于draw交给用户处理，实际canvas的物理像素是逻辑像素 * ratio，所以，自己实现的draw方法需要在原来的x, y, w, h尺寸上做ratio的乘法处理
//for example
draw(ctx, w, h, ratio) {
ctx.drawImage(this.currentImage, this.x * ratio, this.y * ratio, Math.floor((37 / scale) * ratio), h * ratio)
}onClick: 组件被点击时候使用，函数内部this指向当前组件，可以在这个修改组件的参数和应用的状态
图片组件属性
经过ImageComponent封装后的组件具有以下属性
_x: 图片的x坐标的实际物理像素(x * ratio)
_w: 图片的y坐标的实际物理像素(y) * ratio)
_width: 图片的宽度的实际物理像素(width * ratio)
_height: 图片的高度的实际物理像素(height * ratio)
x: 图片的x坐标的逻辑像素(height * ratio)
y: 图片的y坐标的逻辑像素(height * ratio)
width: 图片的宽度的逻辑像素(height * ratio)
height: 图片的高度的逻辑像素(height * ratio)
_ratio: canvas的缩放比
$canvas: canvas对象
_canvasWidth: canvas的实际物理像素宽度(canvas.width * ratio)
_canvasHeight: canvas的实际物理像素高度
$images: 根据scope返回对应图片封装好的离线canvas对象，用来绘制在当前canvas
operate: 组件operate属性
beforwDraw: 组件draw函数执行前检查属性的正确性
draw: 组件绘制函数
$components: 所有通过chaos.use生成的组件列表
$data: globalData对象
其他属性: 任意定义在组件上的属性都会复制到返回的组件的属性上