小程序组件-canvas拖拽画板
wxa-comp-canvas-drag是一个可以添加多种元素（图片和文字）的画板，用户可以移动拖拽元素组成自己喜欢的样子并导出图片。
使用前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。
小程序已经支持使用 npm 安装第三方包，详见 npm 支持
# npm
npm i wxa-comp-canvas-drag -S --production
# yarn
yarn add wxa-comp-canvas-drag --production直接通过 git 下载 wxa-comp-canvas-drag 源代码，并将miniprogram_dist目录拷贝到自己的项目组件目录中
{
"usingComponents": {
"canvas-drag": "/components/canvas-drag/index"
}
}接着就可以在 wxml 中插入组件
<canvas-drag id="canvas-drag" graph="{{graph}}" width="700" height="750"></canvas-drag>| 字段 | 类型 | 必填 | 描述 |
|---|---|---|---|
| graph | Object | 否 | 看下文 |
| bgColor | String | 否 | 画板背景颜色 |
| bgImage | String | 否 | 画板背景图片地址（本地地址） |
| width | Number | 否（默认750） | 画板宽度（单位rpx） |
| height | Number | 否（默认750） | 画板高度（单位rpx） |
| 字段 | 类型 | 必填 | 描述 |
|---|---|---|---|
| type | String（'text'或者'image'） | 是 | 加入画板的元素类型，有text和image两种类型 |
| w | Number | type=image时，必填 | 图片宽度 |
| h | Number | type=image时，必填 | 图片高度 |
| url | String | type=image时，必填 | 图片地址（本地地址） |
| sourceId | String | type=image时可用，选填 | 图片信息（导出模板用） |
| text | String | type=text时，必填 | 文本内容 |
组件通过canvas-drag.js对外暴露了以下几个接口
| 接口名 | 入参 | 返回 | 描述 |
|---|---|---|---|
| export | 无 | Promise对象，成功回调返回图片地址 | 导出画板生成的图片地址 |
| exportJSON | 无 | Promise对象，成功回调返当前画板配置 | 导出画板布局数据 |
| clearCanvas | 无 | 无 | 清空画布 |
| initByArr | exportJSON导出的数据 | 无 | 用配置文件一次渲染多个元素 |
| changFontColor | color（改变的颜色值） | 无 | 改变选择文本颜色 |
| changeBgColor | color（改变的颜色值） | 无 | 改变画板背景颜色 |
| changeBgImage | imageUrl（图片地址（本地地址）） | 无 | 改变画板背景图片 |
| changeBgImage | {url:"图片URL",sourceId:"图片信息"} | 无 | 改变画板背景图片 |
有什么问题可以直接提issue
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent