【開源】微信小程序、小遊戲以及 Web 通用 Canvas 渲染引擎 - Cax

Cax

小程序、小遊戲以及 Web 通用 Canvas 渲染引擎

• Github → github.com/dntzhang/ca…
• 綜合 DEMO | 運動 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
• 屬性
  • Transform
  • Alpha
  • CompositeOperation
  • Cursor
• 事件
  • 小程序事件
  • Web 事件
• 運動
• 自定義對象
  • 自定義 Shape
  • 自定義 Element
• License

一分鐘入門小程序 cax 使用

到 GitHub 下載 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()
  }
})
複製代碼

效果以下所示:

除了 tap 事件，也能夠幫 rect 綁定其餘觸摸事件：

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

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

rect.on('touchend', () => {
  console.log('touchend')
})
複製代碼

一分鐘入門小遊戲 cax 使用

到 GitHub 下載 cax 小遊戲示例，目錄結構以下:

const stage = new cax.Stage()
複製代碼

和小程序以及 Web 不一樣的是，小遊戲建立 Stage 不須要傳任何參數。

一分鐘入門 Web cax 使用

經過 npm 或者 CDN 獲取:

npm i cax
複製代碼

• unpkg.com/cax@latest/…
• unpkg.com/cax@latest/…

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	元素的透明度

注意這裏父子都設置了 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	拖拽

運動

cax 內置了 to 的能力以連綴的方式寫運動效果：

cax.To.get(bitmap)
    .to()
    .y(240, 2000, cax.easing.elasticInOut)
    .rotation(240, 2000, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task one has completed!")
    })
    .wait(500)
    .to()
    .rotation(0, 1400, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task two has completed!")
    })
    .wait(500)
    .to()
    .scaleX(1, 1400, cax.easing.elasticInOut)
    .scaleY(1, 1400, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task three has completed!")
    })
    .start()
複製代碼

固然，也能夠經過 set 方法支持任意屬性的運動，如:

.set('y', 240, 2000, cax.easing.elasticInOut)
複製代碼

等同於

.y(240, 2000, cax.easing.elasticInOut)
複製代碼

演示地址

自定義對象

自定義 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