@huteming/ui-canvas-draw

封装 canvas 方法，主要是解决了 canvas 在不同分辨率中显示可能模糊的问题。并封装了一些原生方法，方便调用导出图片

引入

import { CanvasDraw } from '@huteming/ui'

代码演示

基础用法

const instance = new CanvasDraw(750, 1109)

// instance.onerror(console.error)
instance.add(({ context, canvas, ratio, width, height }) => {
    instance.drawText('hello world', 24, 93)
})

const src = instance.done('png')

高斯模糊

const instance = new CanvasDraw(750, 1109)

instance.add(({ context, canvas, ratio, canvasWidth, canvasHeight }) => {
    const x = 52
    const y = 424
    const width = 552
    const height = 177
    const r = '20 20 -20 -20'

    const blurryCanvas = instance.getBlurryArea(100, x, y, width, height)
    // 创建不规则区域然后将模糊图像渲染
    instance.drawRect(x, y, width, height, { r })
    context.clip()
    instance.drawImage(blurryCanvas, x, y, width, height)
    instance.drawRect(x, y, width, height, { r, color: 'rgba(255, 255, 255, 0.62)' })
})

const src = instance.done('png')

删除线

const instance = new CanvasDraw(750, 1109)

instance.add(() => {
    instance.drawText('<through>删除线</through>', x, y, optionsText)
})

const src = instance.done('png')

下划线

const instance = new CanvasDraw(750, 1109)

instance.add(() => {
    instance.drawText('<underline>下划线</underline>', x, y, optionsText)
})

const src = instance.done('png')

API

构造函数参数

name	描述	默认参数
width	设计稿上画布宽度
height	设计稿上画布高度
optionsCanvas	配置

实例方法

name	描述	参数
add	执行callback前后分别执行 save, restore 方法	Function: callbackDraw({ context, canvas, ratio, width, height })
onerror	异常处理.默认为 console.error	Error
done	导出图片	Object: optionsDone

实例辅助绘图方法

name	描述	参数
drawArc	圆形	x, y, r, optionsArc
drawRect	矩形	x, y, width, height, optionsRect
drawText	文本	text, x, y, optionsText
drawLine	直线	startX, startY, endX, endY, optionsLine
drawImage	图片	image, x, y, width, height
getBlurryArea	创建高斯模糊区域	radius, x, y, width, height

optionsDone

参数	描述	可选值	默认值
type	导出图片类型	jpg | png	png

optionsCanvas

name	描述	默认值
designWidth	设计稿标准总宽度, 单位: px	750

optionsArc

参数	描述	默认值
startDegrees	开始角度	0
endDegrees	结束角度	360
direction	方向。false: 顺时针, true: 逆时针	false
lineWidth	画笔宽度	1
color	画笔颜色	#000
type	画笔类型, fill, stroke	fill

optionsRect

参数	描述	默认值
r	圆角半径	0
lineWidth	画笔宽度	1
color	画笔颜色	#000
type	画笔类型, fill, stroke	fill

optionsText

参数	描述	默认值
fix	过长省略时添加字符串	'.... '
maxWidth	最长宽度，会在末尾加上 fix 字符串，一般搭配前缀 后缀使用	Infinity
style	字体的风格 normal, italic, oblique	normal
variant	字体变体 normal, small-caps	normal
weight	字体的粗细 bold bolder lighter 100 200 300 400 500 600 700 800 900	normal
size	字号	24
lineHeight	行高, 若不存在，则在运行时会重置为 size * 1.5	0
align	对齐方式 start, end, center, left, right	start
baseline	文本基线, alphabetic, top, hanging, middle, ideographic, bottom	top
letterSpacing	字体间距	0
lineWidth	画笔宽度	1
wrap	换行次数，不包括第一行。true => Infinity; false => 0	0
shadowColor	阴影颜色	-
shadowOffsetX	阴影	0
shadowOffsetY	阴影	0
shadowBlur	阴影	0
color	画笔颜色	#000
type	画笔类型, fillText, strokeText	fillText
underline	下划线参数	{ left: 10, right: 10, bottom: 6, dashed: [], lineWidth: 1 }

optionsLine

参数	描述	默认值
lineWidth	画笔宽度	1
color	画笔颜色	#000