vue3使用canvas进行绘图的时候,动态实现绘制文字居中。实现绘制文字的时候设置间距。有文字间距的情况下动态实现居中

比如我绘制两个字，drawText(‘李白’, 32,’Arial’, ‘#062466’, 516, 335)，最后两个参数是x,y坐标。这样可以文字居中绘制，但是如果绘制的文字变成了三个字，比如drawText(‘黄飞鸿’, 32,’Arial’, ‘#062466’, 516, 335)，文字就没有居中了，但是这里的文字是动态的，无法知道是2个字还是3个字，甚至可能是4个字

下面代码实现动态的文字居中绘制（没有文字间距的情况）

要实现动态文字的居中绘制，你需要首先测量文字的宽度，然后根据Canvas的宽度来计算并设置文字的起始x坐标，使其居中。在HTML5 Canvas中，你可以使用measureText方法来获取文本的宽度。

下面是一个示例函数，它接受文本、字体大小、字体样式、字体颜色、Canvas的宽度和期望的垂直位置（y坐标）作为参数，并在Canvas上居中绘制文本：

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)