Cax 小程序中使用

一分鐘入門小程序 cax 使用

到 GitHub 下載 cax 自定義組件，然后小程序引入 cax 自定義組件:

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

在 page 或者 component 里聲明依賴:

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

在的 wxml 里引入 cax 標(biāo)簽:

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

在 js 里渲染邏輯:

import cax from '../cax/index'


Page({
  onLoad: function () {
    //比 web 里使用 cax 多傳遞 this，this 代表 Page 或 Component 的實(shí)例
    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')
})