@hsu-canvas/renderer NPM

Canvas Renderer

canvas-renderer 一些生成 canvas 的渲染器

npm install --save @hsu-canvas/renderer
# 或
yarn add @hsu-canvas/renderer

参数	说明	类型	默认值	备注
options	文本渲染参数	TextGraphicsOptions	-	-

参数	说明	类型	默认值	备注
content	渲染文本	string \| string[]	-	-
borderStyle	边框样式	BorderStyle	-	-
backgroundStyle	背景样式	BackgroundStyle	-	-
fontStyle	字体样式	FontStyle	-	-
padding	内距	Padding	0	-
size	canvas 大小	Size \| Size, Size	'auto', 'auto'	bgImg 只在 backgroundStyle 中设置了 image 时生效
align	对齐方式	Align	center	-
rowGap	文本间隔	number	0	-

参数	说明	类型	默认值	备注
font	字体	Font	-	-
color	颜色	string \| LinearGradient	#000	-
textAlign	文字对齐	TextAlign	center	-
letterSpacing	文字间隔	number	0	-
border	文字边框	TextBorderStyle	-	-
shadow	文字阴影	TextShadowStyle \| TextShadowStyle[]	-	-

type Padding = number | number, number | number, number, number, number

type Size = number | 'auto' | 'bgImg'

type Align = 'top' | 'center' | 'bottom'

type Radius = number | number, number, number, number

interface LinearGradient {
  [key: number]: string
}

key 的范围为 0 - 1

type Direction = 'vertical' | 'horizontal'

type Fill = 'ctx' | 'img'

类型	说明
ctx	图片大小为 canvas 大小
img	图片大小为图片自身大小

type TextAlign = 'left' | 'center' | 'right'

参数	说明	类型	默认值	备注
color	边框颜色	string	#000	-
width	边框宽度	number	0	-

参数	说明	类型	默认值	备注
options	图片渲染参数	ImageGraphicsOptions	-	-

参数	说明	类型	默认值	备注
imgs	图片	string \| ImageItem \| Array<string \| ImageItem>	-	必填
padding	内边距	Padding	0	-
direction	布局样式	Direction	vertical	-
gap	间隔	number	0	-
imgAlign	对齐方式	ImgAlign	center	-
width	canvas 宽度	number \| 'auto'	auto	auto 时为图片最大宽度
height	canvas 高度	number \| 'auto'	auto	auto 时为图片最大高度