vue3使用canvas进行绘图的时候,动态实现绘制文字居中。实现绘制文字的时候设置间距。有文字间距的情况下动态实现居中 电脑版发表于：2024/12/17 10:09 比如我绘制两个字，drawText('李白', 32,'Arial', '#062466', 516, 335)，最后两个参数是x,y坐标。这样可以文字居中绘制，但是如果绘制的文字变成了三个字，比如drawText('黄飞鸿', 32,'Arial', '#062466', 516, 335)，文字就没有居中了，但是这里的文字是动态的，无法知道是2个字还是3个字，甚至可能是4个字 [TOC] ### 下面代码实现动态的文字居中绘制（没有文字间距的情况） 要实现动态文字的居中绘制，你需要首先测量文字的宽度，然后根据Canvas的宽度来计算并设置文字的起始x坐标，使其居中。在HTML5 Canvas中，你可以使用`measureText`方法来获取文本的宽度。 下面是一个示例函数，它接受文本、字体大小、字体样式、字体颜色、Canvas的宽度和期望的垂直位置（y坐标）作为参数，并在Canvas上居中绘制文本： ```javascript function drawCenteredText(ctx, text, fontSize, fontFamily, fontColor, canvasWidth, y) { // 设置字体样式 ctx.font = `${fontSize}px ${fontFamily}`; // 测量文本的宽度 const textWidth = ctx.measureText(text).width; // 计算起始x坐标，使文本居中 const x = (canvasWidth - textWidth) / 2; // 设置文本颜色 ctx.fillStyle = fontColor; // 绘制文本 ctx.fillText(text, x, y); } // 使用示例 const canvas = document.getElementById('myCanvas'); // 替换为你的Canvas元素ID const ctx = canvas.getContext('2d'); const canvasWidth = canvas.width; // 确保Canvas宽度已被设置 const y = 335; // 垂直位置 // 动态文本 const text1 = '李白'; const text2 = '黄飞鸿'; // 绘制第一个文本 drawCenteredText(ctx, text1, 32, 'Arial', '#062466', canvasWidth, y); // 如果你想在同一Canvas上绘制另一个文本（可能会覆盖前一个），你需要清除或移动它 // 例如，清除整个Canvas：ctx.clearRect(0, 0, canvasWidth, canvas.height); // 然后绘制第二个文本 drawCenteredText(ctx, text2, 32, 'Arial', '#062466', canvasWidth, y); ``` 在这个例子中，`drawCenteredText`函数会根据提供的Canvas宽度和文本宽度来计算起始x坐标，从而确保文本在水平方向上居中。你可以根据需要多次调用这个函数来绘制不同的文本，只要确保每次调用时都提供了正确的参数。 请注意，如果你想要在同一Canvas上绘制多个文本而不覆盖它们，你需要调整它们的y坐标或使用其他方法来管理它们的布局。此外，如果Canvas的宽度是动态的（例如，根据窗口大小调整），你需要确保在调用`drawCenteredText`之前更新了`canvasWidth`变量的值。 ### 实现绘制文字的时候设置间距，并且实现文字居中 #### 先封装一个支持绘制文字的时候设置间距的方法 ``` // 可以设置间距的写入方式 const fillTextFromLetterSpacings = (drawctx: any, textToDraw: any, x: number = 50, y: number = 50, letterSpacing: number = 0) => { // 分割文本为单个字符 const chars = textToDraw.split('') let currentX = x // 遍历每个字符并绘制 chars.forEach((char: any) => { // 测量字符宽度 const textWidth = drawctx.measureText(char).width // 绘制字符，并在其后添加额外的间距 drawctx.fillText(char, currentX, y) // 更新当前X位置以包含间距 currentX += textWidth + letterSpacing }) } ``` #### 然后在封装绘制有间距文字的时候实现动态居中 ``` // 文字居中的方式绘制，保函可以设置间距 function drawCenteredTextHaveLetterSpacings(ctx:any, text: any, fontSize: number,fontFamily:string, fontColor: string , canvasWidth: number, y: number,letterSpacing: number = 0) { // 设置字体样式 ctx.font = `${fontSize}px ${fontFamily}`; // 测量文本的宽度 const textWidth = ctx.measureText(text).width; // console.log("文字的宽度",textWidth) // 计算起始x坐标，使文本居中。这里还要减去设置的间距，比如2个字之间就是1个间距，3个字之间就是2个间距 const x = ((canvasWidth - textWidth-(letterSpacing*(text.length-1))) / 2); // 设置文本颜色 ctx.fillStyle = fontColor; // 绘制文本 // ctx.fillText(text, x, y); // 封装可以设置间距的写入方法 fillTextFromLetterSpacings(ctx,text,x,y,letterSpacing) } ``` #### 使用方法 ``` let drapName = "地表最强男人" // drawCenteredText(ctx.value,drapName, 32,'Arial', '#062466', canvasWidth.value, 335) drawCenteredTextHaveLetterSpacings(ctx.value,drapName, 32,'Arial', '#062466', canvasWidth.value, 335,6) 466', canvasWidth.value, 335,6) ```
