1.0.4 • Published 5 years ago

taro-canvas-helper-test v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

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]
})
参数名类型介绍
urlstring <必填>图片加载后的本地地址,图片必须先load后才能使用绘制api
xnumber<必填>x轴起点
ynumber<必填>y轴起点
widthnumber<必填>绘制宽度
heightnumber<必填>绘制高度
radiusnumber|number[]<非必填,默认值为0>圆角

loadImage

功能:加载单张图片

const path=await helper.loadImage(url)
参数名类型介绍
urlstring <必填>图片地址

loadImgs

功能:加载多张图片

const imgs=string[]=await helper.loadImgs([])
参数名类型介绍
urlsstring[] <必填>图片地址数组

drawRect

功能:绘制矩形

helper.drawRect({
    width: 750,
	height: 100,
	x: 0,
	y: 0,
	bgColor: '#e63127',
	radius:[10,20,30,10]
})
参数名类型介绍
bgColorstring <必填>背景颜色
xnumber<必填>x轴起点
ynumber<必填>y轴起点
widthnumber<必填>绘制宽度
heightnumber<必填>绘制高度
radiusnumber|number[]<非必填,默认值为0>圆角

initText

功能:绘制文本

helper.initText({
	text: '',
	x: 0,
	y: 0,
	color: '#fff',
	fontSize: 16,
	lineHeight: 26
})
参数名类型介绍
colorstring <必填>字体颜色
fontSizenumber <必填>字体大小
fontWeight'bold'|'normal' <非必填,默认值normal>字体粗细
lineHeightnumber <非必填,默认值为字体大小>行高
xnumber<必填>x轴起点
ynumber<必填>y轴起点
textnumber<必填>内容
textAlign'left'|'center'|'right'<非必填,默认值left>对齐方式

breakText

功能:字体换行,超出以...结尾

const strArr:string[]=helper.breakText({
    str:'',
    maxByteLength:10,
    maxLine:1
})
参数名类型介绍
strstring <必填>内容
maxByteLengthnumber <必填>单行最大字节数(中文为2个字节,英文为1个字节)
maxLinenumber <必填>最大行数

draw

功能:完成绘制

helper.draw()
1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago