Skip to content

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

License

Notifications You must be signed in to change notification settings

suguoyao/miniprogram-canvas-sugarjs

Repository files navigation

miniprogram-canvas-sugarjs

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

介绍

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

开发进度

开发中...

使用方法

  1. 安装组件
npm install --save miniprogram-canvas-sugarjs
  1. .wxml
<canvas id="sugarjs"
        type="2d"
        disable-scroll="true"
        bindtouchstart="touchstart"
        bindtouchmove="touchmove"
        bindtouchend="touchend"
        style='width: {{width}}px; height: {{height}}px;'>
</canvas>
  1. 在.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'
      })
    })
  }
})

功能清单

  1. canvas主体
  • 初始化(宽高、背景)
  • 其他...
  1. 图层类
  • 基类ObjectClass
  • 图片ImageClass
  • 文本TextClass
  • 矩形RectClass
  • 三角形TriangleClass
  • 多边形PolygonClass
  • 圆CircleClass
  • 椭圆EllipseClass
  • 直线LineClass
  • 群组GroupClass
  • 其他...
  1. 操作
  • 增删
  • 点击图层进入选中状态(显示图层边框控件)
  • 拖动
  • 缩放
  • 旋转
  • 翻转
  • 图层层级管理(上移、下移、置顶、置底)
  • 文本内容编辑
  • 其他...
  1. 事件监听
  • canvas初始化周期事件
  • 手指触摸事件
  • 清单3中的操作事件的监听
  • 其他...
  1. 拓展、增强功能
  • 状态存储(撤销undo、恢复redo)
  • 导入、导出canvas数据
  • toDataURL生成图片
  • 手势缩放、旋转
  • 动画
  • 其他...

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published