Miniprogram-canvas-sugarjs NPM

miniprogram-canvas-sugarjs

使用此组件需要依赖依赖开发者工具的 npm 构建。具体详情可查阅微信小程序官方npm文档。

介绍

打造一个致力于微信小程序的Canvas库，类似于H5原生JS Canvas库 - FabricJS

开发进度

开发中...

使用方法

安装组件

npm install --save miniprogram-canvas-sugarjs

.wxml

<canvas id="sugarjs"
        type="2d"
        disable-scroll="true"
        bindtouchstart="touchstart"
        bindtouchmove="touchmove"
        bindtouchend="touchend"
        style='width: {{width}}px; height: {{height}}px;'>
</canvas>

在.js文件中引用

const sugar = require('miniprogram-canvas-sugarjs')

Page({
  data: {
    width: windowWidth,
    height: 500,
  },
  onReady() {
    const query = wx.createSelectorQuery()
    query.select(`#sugarjs`).fields({node: true, size: true}).exec(res => {
      const canvas = res[0].node
      this.sugar = new sugar.Canvas({
        canvas: canvas,
        width: this.data.width,
        height: this.data.height,
        backgroundColor: 'skyblue'
      })
    })
  }
})