taro-canvas-helper
基于Taro开发的Canvas绘制工具，能够快捷绘制矩形，图片，文字，二维码等
安装方法
npm install taro-canvas-helper -s
使用方法
import CanvasHelper from 'taro-canvas-helper'
const ctx = Taro.createCanvasContext('canvasId')
const helper=new CanvasHelper({
ctx
})
helper.drawRect({
width: 750,
height: baseHeight,
x: 0,
y: 0,
bgColor: '#e63127',
radius:10
})
helper.initText({
fontSize: 28,
color: '#e93629',
text: currentDate,
x: 227,
y: 167,
lineHeight: 43,
textAlign: 'center',
fontWeight: 'bold'
})
// 绘制完成必须调用draw方法
helper.draw()
API
drawImage
功能：绘制图片
helper.drawImage({
width: 750,
height: 100,
x: 0,
y: 0,
url: '',
radius:[10,20,30,10]
})
| 参数名 | 类型 | 介绍 |
|---|
| url | string <必填> | 图片加载后的本地地址，图片必须先load后才能使用绘制api |
| x | number<必填> | x轴起点 |
| y | number<必填> | y轴起点 |
| width | number<必填> | 绘制宽度 |
| height | number<必填> | 绘制高度 |
| radius | number|number[]<非必填，默认值为0> | 圆角 |
loadImage
功能：加载单张图片
const path=await helper.loadImage(url)
| 参数名 | 类型 | 介绍 |
|---|
| url | string <必填> | 图片地址 |
loadImgs
功能：加载多张图片
const imgs=string[]=await helper.loadImgs([])
| 参数名 | 类型 | 介绍 |
|---|
| urls | string[] <必填> | 图片地址数组 |
drawRect
功能：绘制矩形
helper.drawRect({
width: 750,
height: 100,
x: 0,
y: 0,
bgColor: '#e63127',
radius:[10,20,30,10]
})
| 参数名 | 类型 | 介绍 |
|---|
| bgColor | string <必填> | 背景颜色 |
| x | number<必填> | x轴起点 |
| y | number<必填> | y轴起点 |
| width | number<必填> | 绘制宽度 |
| height | number<必填> | 绘制高度 |
| radius | number|number[]<非必填，默认值为0> | 圆角 |
initText
功能：绘制文本
helper.initText({
text: '',
x: 0,
y: 0,
color: '#fff',
fontSize: 16,
lineHeight: 26
})
| 参数名 | 类型 | 介绍 |
|---|
| color | string <必填> | 字体颜色 |
| fontSize | number <必填> | 字体大小 |
| fontWeight | 'bold'|'normal' <非必填，默认值normal> | 字体粗细 |
| lineHeight | number <非必填，默认值为字体大小> | 行高 |
| x | number<必填> | x轴起点 |
| y | number<必填> | y轴起点 |
| text | number<必填> | 内容 |
| textAlign | 'left'|'center'|'right'<非必填，默认值left> | 对齐方式 |
breakText
功能：字体换行，超出以...结尾
const strArr:string[]=helper.breakText({
str:'',
maxByteLength:10,
maxLine:1
})
| 参数名 | 类型 | 介绍 |
|---|
| str | string <必填> | 内容 |
| maxByteLength | number <必填> | 单行最大字节数(中文为2个字节，英文为1个字节) |
| maxLine | number <必填> | 最大行数 |
draw
功能：完成绘制
helper.draw()