文本textBaseline改成bottom

src/toCanvas.ts

@@ -54,10 +54,10 @@ export interface RenderOptions {
  * @return Promise<HTMLCanvasElement | string>
  */
 export async function toCanvas(data: ICData, options: RenderOptions = {}, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string> {
-	const {type: exportType = 'png', quality = 0.7} = options;
-	let {scale = window['devicePixelRatio'] || 1} = options;
+	const { type: exportType = 'png', quality = 0.7 } = options;
+	let { scale = window['devicePixelRatio'] || 1 } = options;
 
-	let {nodes, width, height} = data;
+	let { nodes, width, height } = data;
 	width *= scale;
 	height *= scale;
 
@@ -113,7 +113,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
  * @param scale
  */
 function drawImage(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
-	let {x, y, img, width, height, borderRadius: borderRadiusTxt} = data;
+	let { x, y, img, width, height, borderRadius: borderRadiusTxt } = data;
 	x *= scale;
 	y *= scale;
 	width *= scale;
@@ -182,9 +182,13 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number)
 	if (fontStyle) font = fontStyle + " " + font;
 
 	ctx.font = font;
-	ctx.textBaseline = "top";
+	ctx.textBaseline = "bottom";
 	ctx.fillStyle = color;
-	let widthAll = ctx.measureText(text).width;
+	var textMetrics = ctx.measureText(text);
+	let widthAll = textMetrics.width;
+
+	// var actualBoundingBoxAscent = textMetrics.actualBoundingBoxAscent;
+	// console.log(actualBoundingBoxAscent)
 	// console.log(ctx.measureText(text))
 	//超过宽度需要换行,且需要用到居中方式
 	if (wordWrap == "break-word" && widthAll > width) {
@@ -216,10 +220,10 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number)
 		//有待考虑.现在直接拿高度取平均算每行高度
 		let lineH = height / realLines.length;
 		realLines.forEach((r, i) => {
-			ctx.fillText(r, x + tx, y + i * lineH)
+			ctx.fillText(r, x + tx, y + i * lineH + lineH)
 		})
 	} else {
 		ctx.textAlign = "left"
-		ctx.fillText(text, x, y)
+		ctx.fillText(text, x, y + height)
 	}
 }