Taro-canvas-helper NPM

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>	圆角
hMode	'center'\| 'left'\|'right'<非必填，默认值为 center>	水平方向对齐方式
vMode	'center' \| 'top' \| 'bottom'<非必填，默认值为 center>	垂直方向对齐方式

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>	对齐方式
textDecoration	'line-through'\|'none'<非必填，默认值 none>	文本修饰

breakText

功能：字体换行，超出以... 结尾

const strArr=helper.breakText({
    str:'',
    maxByteLength:10,
    maxLine:1
})

参数名	类型	介绍
str	string <必填>	内容
maxByteLength	number <必填>	单行最大字节数(中文为 2 个字节，英文为 1 个字节)
maxLine	number <必填>	最大行数