Skip to content

wxa-component/wxa-comp-canvas-drag

Repository files navigation

wxa-comp-canvas-drag

小程序组件-canvas拖拽画板

npm-version npm-version

概述

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)
enableUndo Boolean 否(默认false) 是否启用后退

graph 字段

字段 类型 必填 描述
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:"图片信息"} 改变画板背景图片
undo 回到上一次的状态

问题反馈

有什么问题可以直接提issue

About

小程序组件-canvas拖拽组件

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published