wxa-component / Wxa Comp Canvas Drag
小程序组件-canvas拖拽组件
Stars: ✭ 208
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Wxa Comp Canvas Drag
Mp canvas drawer
🚀 微信小程序上canvas绘制图片助手，一个json就制作分享朋友圈图片
Stars: ✭ 1,611 (+674.52%)
Mutual labels: wxapp, canvas
Ribbon.js
🎀 Only 1kb javascript gist to generate a ribbon in your website with HTML5 canvas.
Stars: ✭ 189 (-9.13%)
Mutual labels: canvas
Online Privacy Test Resource List
Privacy Online Test and Resource Compendium (POTARC) 🕵🏻
Stars: ✭ 185 (-11.06%)
Mutual labels: canvas
One Html Page Challenge
Can you create something cool without modern tools?
Stars: ✭ 205 (-1.44%)
Mutual labels: canvas
Apple Pencil Safari Api Test
Canvas sketch board, force touch, real-time Bezier curve.
Stars: ✭ 189 (-9.13%)
Mutual labels: canvas
Picasso
Picasso is a high quality 2D vector graphic rendering library. It support path , matrix , gradient , pattern , image and truetype font.
Stars: ✭ 205 (-1.44%)
Mutual labels: canvas
Wxapp Redux Starter
微信小程序，集成redux，并且提供了方便快捷的开发环境；内置好奇心日报Demo...
Stars: ✭ 205 (-1.44%)
Mutual labels: wxapp
Obelisk.js
Build pixel isometric graphics with HTML5 canvas
Stars: ✭ 2,213 (+963.94%)
Mutual labels: canvas
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） |
| 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].