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 <必填> | 最大行数 |

draw

功能：完成绘制

helper.draw()