Cax

小程序、小游戏以致 Web 通用 Canvas 渲染引擎

  • Github →
  • 点小编看看 DEMO
  • 小程序 DEMO 正在审批中敬请期望
  • 小游戏 DEMO 正在核实中敬请期望

特性

  • Learn Once, Write Anywhere(小程序、小游戏、PC Web、Mobile Web)
  • 援助小程序、小游戏甚至 Web 浏览器渲染
  • 小程序、小游戏和 Web 具备雷同简洁轻易的 API
  • 高品质的渲染架构
  • 相当的轻量级的代码体量
  • 松耦合的渲染架构
  • 支撑 Canvas 成分管理
  • 支撑 Canvas 成分事件体系
  • 图灵达成的 group 嵌套种类
  • 嵌入 tween 运动技巧
  • 置于文本、位图、系列帧、绘图对象和八种矢量绘制对象

  • 一分钟入门小程序 cax
    使用
  • 一分钟入门小游戏 cax
    使用
  • 一分钟入门 Web cax
    使用
  • 内置对象
    • Group
    • 澳门凯旋门注册网址,Bitmap
    • Sprite
    • Text
    • Graphics
    • Shape
      • 澳门凯旋门游戏网址,Rect
      • Circel
      • Ellipse
    • Element
      • Button
  • 凯旋门074网址,属性
    • Transform
    • Alpha
    • CompositeOperation
    • Cursor
  • 在 page 只怕 component 里声称信任。事件
    • 小程序事件
    • Web
      事件
  • 自定义对象
    • 自定义
      Shape
    • 自定义
      Element
  • License

在 page 只怕 component 里声称信任。一分钟入门小程序 cax 使用

到 GitHub 在 page 只怕 component 里声称信任。下载 cax
自定义组件,然后小程序引入cax 自定义组件:

└── cax
    ├── cax.js
    ├── cax.json  
    ├── cax.wxml  
    ├── cax.wxss
    └── index.js

在 page 或许 component 里声称重视:

{
  "usingComponents": {
    "cax":"../cax/cax"
  }
}

在的 wxml 里引入 cax 标签:

<cax id="myCanvas"></cax>

在 js 里渲染逻辑:

import cax from '../cax/index'

Page({
  onLoad: function () {
    //比 web 里使用 cax 多传递 this,this 代表 Page 或 Component 的实例
    const stage = new cax.Stage(200, 200, 'myCanvas', this)
    const rect = new cax.Rect(100, 100, {
      fillStyle: 'black'
    })

    rect.originX = 50
    rect.originY = 50
    rect.x = 100
    rect.y = 100
    rect.rotation = 30

    rect.on('tap', () => {
      console.log('tap')
    })

    stage.add(rect)
    stage.update()
  }
})

效能如下所示:

凯旋门074网址 1

除了那几个之外 tap 事件,也足以帮 rect 绑定别的触摸事件:

rect.on('touchstart', () => {
  console.log('touchstart')
})

rect.on('touchmove', () => {
  console.log('touchmove')
})

rect.on('touchend', () => {
  console.log('touchend')
})

一分钟入门小游戏 cax 使用

到 GitHub 在 page 只怕 component 里声称信任。下载 cax
小游戏示例,目录结商谈平运动效如下:

凯旋门074网址 2

const stage = new cax.Stage()

和小程序以致 Web 不相同的是,小游戏成立 Stage 没有须求传任何参数。

一分钟入门 Web cax 使用

通过 npm 或者 CDN 获取:

npm i cax

import cax from 'cax'

const stage = new cax.Stage(200, 200, '#renderTo')
const rect = new cax.Rect(100, 100, {
  fillStyle: 'black'
})

stage.add(rect)
stage.update()

除去 Stage 构造函数比小程序第多个参数 this,别的应用办法都同生机勃勃。

放置对象

Group

用以分组, group 也足以嵌套 group,父容器的性子会叠合在子属性上, 比方:

  • group 的 x 是 100, group 里的 bitmap 的 x 是 200, 最后 bitmap
    渲染到 stage 上的 x 是 300
  • group 的 alpha 是 0.7, group 里的 bitmap 的 alpha 是 0.6, 最后
    bitmap 渲染到 stage 上的 alpha 是 0.42

const group = new cax.Group()
const rect = new cax.Rect(100, 100 {
  fillStyle: 'black'
})
group.add(rect)
stage.add(group)
stage.update()

group 具备常用的 add 和 remove 方法开展成分的增添和删除。先 add
的会先绘制,全部后 add 的会盖在先 add 的方面。

Bitmap

const bitmap = new cax.Bitmap(img)
stage.add(bitmap)
stage.update()

假使只传 url 并不是 Image 对象的实例,供给这么:

const bitmap = new cax.Bitmap('./wepay.png', ()=>{
  stage.update()
})
stage.add(bitmap)

此间要求留意小程序必要安顿 downloadFile
需求布署合法域名手艺健康加载到图片。

能够设置图片裁剪展现区域,和其余 transform 属性:

bitmap.rect = [0, 0, 170, 140]
bitmap.x = 200

Sprite

队列帧动漫组件,能够把自由图片的即兴区域组合成生龙活虎串动漫。

const sprite = new cax.Sprite({
    framerate: 7,
    imgs: ['./mario-sheet.png'],
    frames: [
        // x, y, width, height, originX, originY ,imageIndex
        [0, 0, 32, 32],
        [32 * 1, 0, 32, 32],
        [32 * 2, 0, 32, 32],
        [32 * 3, 0, 32, 32],
        [32 * 4, 0, 32, 32],
        [32 * 5, 0, 32, 32],
        [32 * 6, 0, 32, 32],
        [32 * 7, 0, 32, 32],
        [32 * 8, 0, 32, 32],
        [32 * 9, 0, 32, 32],
        [32 * 10, 0, 32, 32],
        [32 * 11, 0, 32, 32],
        [32 * 12, 0, 32, 32],
        [32 * 13, 0, 32, 32],
        [32 * 14, 0, 32, 32]
    ],
    animations: {
        walk: {
            frames: [0, 1]
        },
        happy: {
            frames: [5, 6, 7, 8, 9]
        },
        win: {
            frames: [12]
        }
    },
    playOnce: false,
    currentAnimation: "walk",
    animationEnd: function () {

    }
});

Text

文件对象

const text = new cax.Text('Hello World', {
  font: '20px Arial',
  color: '#ff7700',
  baseline: 'top'
})

Graphics

绘制对象,用于选取基本的过渡格局的 Canvas 指令绘制图形。

const graphics = new cax.Graphics()
graphics
    .beginPath()
    .arc(0, 0, 10, 0, Math.PI * 2)
    .closePath()
    .fillStyle('#f4862c')
    .fill()
    .strokeStyle('black')
    .stroke()

graphics.x = 100
graphics.y = 200

stage.add(graphics)

Shape

与 Graphics 分歧的是, Shape 日常装有有限的宽高,所以能够动用离屏 Canvas
进行缓存。上面这一个归于 Shape。

Rect

const rect = new cax.Rect(200, 100, {
  fillStyle: 'black'
})

Circel

const circel = new cax.Circel(10)

Ellipse

const ellipse = new cax.Ellipse(10)

留意:从技巧上小游戏和 Web 能够离屏
Canvas,小程序特别,因为小程序不支持动态创造离屏 Canvas。

Element

Element 是各个元素的三结合,如 Bitmap、Group、 Text、 Shape
等勾兑起来的图像。

Button

const button = new cax.Button({
  width: 100,
  height: 40,
  text: "Click Me!"
})

属性

Transform

属性名 描述
x 水平偏移
y 竖直偏移
scaleX 水平缩放
scaleY 竖直缩放
rotation 旋转
skewX 歪斜 X
skewY 歪斜 Y
originX 旋转基点 X
originY 旋转基点 Y

Alpha

属性名 描述
alpha 元素的透明度

留心这里父子都安装了 阿尔法 会实行乘法叠合。

compositeOperation

属性名 描述
compositeOperation 源图像绘制到目标图像上的叠加模式

注意这里假设自身未有概念 compositeOperation
会实行发展查找,找到近年来的定义了 compositeOperation 的父容器作为团结的
compositeOperation。

Cursor

属性名 描述
cursor 鼠标移上去的形状

事件

小程序事件

事件名 描述
tap 手指触摸后马上离开
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchend 手指触摸动作结束
drag 拖拽

Web 事件

事件名 描述
click 元素上发生点击时触发
mousedown 当元素上按下鼠标按钮时触发
mousemove 当鼠标指针移动到元素上时触发
mouseup 当在元素上释放鼠标按钮时触发
mouseover 当鼠标指针移动到元素上时触发
mouseout 当鼠标指针移出元素时触发
tap 手指触摸后马上离开
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchend 手指触摸动作结束
drag 拖拽

自定义对象

自定义 Shape

自定义 Shape 继承自 cax.Shape:

class Sector extends cax.Shape {
  constructor (r, from, to, option) {
    super()

    this.option = option || {}
    this.r = r
    this.from = from
    this.to = to
  }

  draw () {
    this.beginPath()
      .moveTo(0, 0)
      .arc(0, 0, this.r, this.from, this.to)
      .closePath()
      .fillStyle(this.option.fillStyle)
      .fill()
      .strokeStyle(this.option.strokeStyle)
      .lineWidth(this.option.lineWidth)
      .stroke()
  }
}

使用 Shape:

const sector = new Sector(10, 0, Math.PI/6, {
  fillStyle: 'red'
  lineWidth: 2
})
stage.add(sector)
stage.update()

自定义 Element

自定义 Element 继承自 cax.Group:

class Button extends cax.Group {
  constructor (option) {
    super()
    this.width = option.width
    this.roundedRect = new  cax.RoundedRect(option.width, option.height, option.r)
    this.text = new cax.Text(option.text, {
      font: option.font,
      color: option.color
    })

    this.text.x = option.width / 2 - this.text.getWidth() / 2 * this.text.scaleX
    this.text.y = option.height / 2 - 10 + 5 * this.text.scaleY
    this.add(this.roundedRect, this.text)
  }
}

export default Button

使用:

const button = new cax.Button({
  width: 100,
  height: 40,
  text: "Click Me!"
})

貌似景况下,稍稍复杂组合体都提出采纳持续自
Group,那样方便扩充也方便管理本人内部的零构件。
能够观察小游戏的 DEMO 里的
Player、Bullet、Enemy、Background
全部皆以继承自 Group。

License

MIT

相关文章