README
wxa-comp-canvas-drag
小程序组件-canvas拖拽画板
概述
wxa-comp-canvas-drag是一个可以添加多种元素(图片和文字)的画板,用户可以移动拖拽元素组成自己喜欢的样子并导出图片。
组件效果
使用之前
使用前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。
安装
方式一.通过 npm 安装 (推荐)
小程序已经支持使用 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) |
graph 字段
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
type | String('text'或者'image') | 是 | 加入画板的元素类型,有text和image两种类型 |
w | Number | type=image时,必填 | 图片宽度 |
h | Number | type=image时,必填 | 图片高度 |
url | String | type=image时,必填 | 图片地址(本地地址) |
text | String | type=text时,必填 | 文本内容 |
对外暴露接口
组件通过canvas-drag.js对外暴露了以下几个接口
接口名 | 入参 | 返回 | 描述 |
---|---|---|---|
export | 无 | Promise对象,成功回调返回图片地址 | 导出画板生成的图片地址 |
changFontColor | color(改变的颜色值) | 无 | 改变选择文本颜色 |
changeBgColor | color(改变的颜色值) | 无 | 改变画板背景颜色 |
changeBgImage | imageUrl(图片地址(本地地址)) | 无 | 改变画板背景图片 |
问题反馈
有什么问题可以直接提issue