# taro-plugin-canvas
小程序组件-小程序海报组件
[![npm](https://img.shields.io/npm/v/taro-plugin-canvas.svg?style=flat "npm")](https://www.npmjs.com/package/taro-plugin-canvas)[![npm](https://img.shields.io/npm/dm/taro-plugin-canvas.svg?style=flat "npm")](https://www.npmjs.com/package/taro-plugin-canvas)
## 概述
taro-plugin-canvas 是基于 Taro 框架的微信小程序 canvas 绘图组件,封装了常用的操作,通过配置的方式生成分享图片
本组件是基于 [wxa-plugin-canvas](https://github.com/jasondu/wxa-plugin-canvas) 的Taro封装版本
## 生成效果
<img width="300" src="https://github.com/chuyun/taro-plugin-canvas/blob/master/src/assets/images/demo1.png"></img> <img width="300" src="https://github.com/chuyun/taro-plugin-canvas/blob/master/src/assets/images/demo2.png"></img><img width="300" src="https://github.com/chuyun/taro-plugin-canvas/blob/master/src/assets/images/demo3.png"></img>
## 组件原理说明
参见 wxa-plugin-canvas => https://juejin.im/post/5b7e48566fb9a01a1059543f
## 使用之前
使用 taro-plugin-canvas 前,请确保你已经学习过微信官方的 [小程序简易教程](https://mp.weixin.qq.com/debug/wxadoc/dev/) 和 [自定义组件介绍](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。
## 安装
#### 通过 npm 安装 (推荐)
小程序已经支持使用 npm 安装第三方包,详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
``` bash
# npm
npm i taro-plugin-canvas -S --production
# yarn
yarn add taro-plugin-canvas --production
```
## 使用组件
```javascript
// 引入代码
import { TaroCanvasDrawer } from '../../component/taro-plugin-canvas';
// 在 render 方法中调用
<TaroCanvasDrawer
config={this.state.config}
onCreateSuccess={this.onCreateSuccess}
onCreateFail={this.onCreateFail}
/>
// 注意点
// config 绘图配置信息 - 必填项
// onCreateSuccess 绘图成功回调 - 必须实现 => 接收绘制结果、重置 TaroCanvasDrawer 状态
// onCreateFail 绘图失败回调 - 必须实现 => 接收绘制错误信息、重置 TaroCanvasDrawer 状态
```
#### 方式二.下载代码
直接通过 git 下载 taro-plugin-canvas 源代码,并将`src/component/taro-plugin-canvas`目录拷贝到自己的项目的 `src/component`目录中
## 使用组件
```javascript
// 引入代码 *引入方式和上面的方式一略有不同
import TaroCanvasDrawer from '../../component/taro-plugin-canvas';
// 在 render 方法中调用 和方式一一样
```
## 使用注意事项
1. 图片的域名**务必**添加到downloadFile合法域名中(开发设置-服务器域名-downloadFile合法域名)
【P.s 开发时可 选中不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书】
【P.s 真机运行,可打开调试模式】
## 组件参数解释
### config字段
| 字段 | 类型 | 必填 | 描述 |
| --------------- | ------------------------ | ---- | ------------------------------------------ |
| width | Number(单位:rpx) | 是 | 画布宽度 |
| height | Number(单位:rpx) | 是 | 画布高度 |
| backgroundColor | String | 否 | 画布颜色 |
| debug | Boolean | 否 | false隐藏canvas,true显示canvas,默认false |
| preload | Boolean | 否 | true:图片资源预下载 默认false |
| hide-loading | Boolean | 否 | true:隐藏loading 默认false |
| blocks | Object Array(对象数组) | 否 | 看下文 |
| texts | Object Array(对象数组) | 否 | 看下文 |
| images | Object Array(对象数组) | 否 | 看下文 |
| lines | Object Array(对象数组) | 否 | 看下文 |
### blocks字段
| 字段名 | 类型 | 必填 | 描述 |
| --------------- | ---------------- | ---- | -------------------------------------- |
| x | Number(单位:rpx) | 是 | 块的坐标 |
| y | Number(单位:rpx) | 是 | 块的坐标 |
| width | Number(单位:rpx) | 否 | 如果内部有文字,由文字宽度和内边距决定 |
| height | Number(单位:rpx) | 是 | |
| paddingLeft | Number(单位:rpx) | 否 | 内左边距 |
| paddingRight | Number(单位:rpx) | 否 | 内右边距 |
| borderWidth | Number(单位:rpx) | 否 | 边框宽度 |
| borderColor | String | 否 | 边框颜色 |
| backgroundColor | String | 否 | 背景颜色 |
| borderRadius | Number(单位:rpx) | 否 | 圆角 |
| text | Object | 否 | 块里面可以填充文字,参考texts字段解释 |
| zIndex | Int | 否 | 层级,越大越高 |
### texts字段
| 字段名 | 类型 | 必填 | 描述 |
| -------------- | ---------------- | ---- | ------------------------------------------------------------ |
| x | Number(单位:rpx) | 是 | 坐标 |
| y | Number(单位:rpx) | 是 | 坐标 |
| text | String\|Object | 是 | 当Object类型时,参数为text字段的参数,marginLeft、marginRight这两个字段可用(示例请看下文) |
| fontSize | Number(单位:rpx) | 是 | 文字大小 |
| color | String | 否 | 颜色 |
| opacity | Int | 否 | 1为不透明,0为透明 |
| lineHeight | Number(单位:rpx) | 否 | 行高 |
| lineNum | Int | 否 | 根据宽度换行,最多的行数 |
| width | Number(单位:rpx) | 否 | 没有指定为画布宽度 |
| marginLeft | Number(单位:rpx) | 否 | 当text字段为Object可以使用,用来控制多行文字间距 |
| marginRight | Number(单位:rpx) | 否 | 当text字段为Object可以使用,用来控制多行文字间距 |
| textDecoration | String | 否 | 目前只支持 line-through(贯穿线),默认为none |
| baseLine | String | 否 | top\| middle\|bottom基线对齐方式 |
| textAlign | String | 否 | left\|center\|right对齐方式 |
| zIndex | Int | 否 | 层级,越大越高 |
| fontFamily | String | 否 | 小程序默认字体为'sans-serif', 请输入小程序支持的字体,例如:'STSong' |
| fontWeight | String | 否 | 'bold'加粗字体,目前小程序不支持 100 - 900 加粗 |
| fontStyle | String | 否 | 'italic'倾斜字体 |
##
没有合适的资源?快使用搜索试试~ 我知道了~
基于Taro框架的微信小程序canvas绘图组件
共34个文件
js:14个
json:3个
png:3个
需积分: 20 10 下载量 162 浏览量
2019-08-10
07:10:15
上传
评论 1
收藏 2.54MB ZIP 举报
温馨提示
基于 Taro 框架的微信小程序 canvas 绘图组件,封装了常用的操作,通过配置的方式生成分享图片
资源推荐
资源详情
资源评论
收起资源包目录
基于Taro框架的微信小程序canvas绘图组件.zip (34个子文件)
taro-plugin-canvas-master
project.config.json 528B
.eslintrc 221B
yarn.lock 310KB
src
index.html 1015B
pages
index
index.scss 462B
index.js 15KB
simple
index.scss 462B
index.js 6KB
component
taro-plugin-canvas
utils
draw.js 13KB
tools.js 5KB
index.css 242B
index.js 8KB
app.js 905B
assets
images
demo2.png 717KB
demo1.png 259KB
demo3.png 1.35MB
app.scss 0B
config
prod.js 112B
dev.js 113B
index.js 2KB
LICENSE 1KB
README.md 17KB
yarn-error.log 3KB
dist
weapp
components
taro-plugin-canvas
utils
draw.js 13KB
tools.js 5KB
index.css 242B
index.js 8KB
index.js 86B
index.js 128B
DEMO.md 6KB
.editorconfig 197B
.gitignore 73B
package-lock.json 401KB
package.json 2KB
共 34 条
- 1
资源评论
weixin_39840924
- 粉丝: 492
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功