基于canvas的二次封装方法TS

/**
 * @description canvas 绘制多行文本
 * ctx canvas对象
 * str 文本
 * left 距离左侧距离
 * top 距离顶部距离
 * titleHeight 文本高度
 * canvasWidth 文本宽度
 */
export const drawText = function(ctx: AnyObject, str: string, left: number, top: number, titleHeight: number, canvasWidth: number, text_height?: number) {
    let lineWidth: number = 0		// 文本行宽
    let lastSubStrIndex = 0		 	//每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;			// 获取文本尺寸&宽度
        if (lineWidth > canvasWidth) {
            ctx.fillText(str.substring(lastSubStrIndex, i), left, top) //绘制截取部分
            top += text_height ? text_height : 22 //22为 文字大小20 + 2
            lineWidth = 0
            lastSubStrIndex = i
            // titleHeight += 22
            titleHeight += text_height ? text_height : 22
        }
        if (i == str.length - 1) { //绘制剩余部分
            ctx.fillText(str.substring(lastSubStrIndex, i + 1), left, top)
        }
    }
    // 标题border-bottom 线距顶部距离
    // titleHeight = titleHeight + 10
    return {
			titleHeight,
			lineWidth
		}
}


/**
 * @description canvas 计算多行文本高度
 * ctx canvas对象
 * str 文本
 * titleHeight 文本高度
 * canvasWidth 文本宽度
 */
export const computedTextHeight = function(ctx: AnyObject, str: string, titleHeight: number, text_height: number, canvasWidth: number) {
    let lineWidth: number = 0		// 文本行宽
    let lastSubStrIndex = 0		 	//每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width			// 获取文本尺寸&宽度
        if (lineWidth > canvasWidth) {
            lineWidth = 0
            lastSubStrIndex = i
            titleHeight += text_height ? text_height : 22
        }
    }
    return {
			titleHeight,
			lineWidth
		}
}



/**
 * @description canvas 绘制圆形图片
 * ctx canvas对象
 * path 图片路径
 * left 距离左侧距离
 * top 距离顶部距离
 * titleHeight 文本高度
 * canvasWidth 文本宽度
 */
export interface IImgInfo {
	x: number;
	y: number;
	width: number;
	height: number;
}
export const drawArcImg = function(ctx: AnyObject, path: string, arc_x: number, arc_y: number, arc_r: number, img_info: IImgInfo, arc_bg?: string) {
	arc_bg = arc_bg ? arc_bg : '#ffffff'
	ctx.save()
	ctx.arc(arc_x, arc_y, arc_r, 0, 2 * Math.PI)
	ctx.setFillStyle(arc_bg)
	ctx.fill()
	ctx.clip()
	ctx.drawImage(path, img_info.x, img_info.y, img_info.width, img_info.height)
	ctx.draw(true)
	// 恢复之前保存的绘图上下文
	ctx.restore()
}


/**
 * @description canvas 绘制圆角矩形
 * ctx canvas对象
 * x x坐标
 * y y坐标
 * width 宽度
 * height 高度
 * radius 圆角（一定不能大于 height 的一半，否则不显示）
 * strokeColor 线条颜色
 * fillColor   填充色
 */
export const drawRoundRect = function (cxt: AnyObject, x: number, y: number, width: number, height: number, radius: number, strokeColor: string, fillColor: string) {
	cxt.strokeStyle = strokeColor
	cxt.beginPath()
	cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2)
	cxt.lineTo(width - radius + x, y)
	cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2)
	cxt.lineTo(width + x, height + y - radius)
	cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2)
	cxt.lineTo(radius + x, height + y)
	cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI)
	cxt.closePath()
	cxt.fillStyle = fillColor
	cxt.fill()
}