Question

处有一个工作示例

因为顶部文本很长，所以两端都延伸。我试图将文本动态地分成多行，以便根据图像的大小和输入文本的长度来容纳它们。

当文本长于图像宽度时，如何将其分成多行？

function drawTextBG(ctx, txt, font, x, y, txtWidth, imgWidth) {
  ctx.save();
  ctx.font = font;
  ctx.textAlign = "center";
  ctx.textBaseline = 'middle';
  ctx.fillStyle = '#FFFFFF';
  var dimen = measureText(txt, font)
  var height = dimen['height']
  var width = dimen['width']
  var fontsize = height/5
  ctx.fillRect(x - width/2, y-height/2 + fontsize/2, width, parseInt(font));
  ctx.fillStyle = '#000000';
  ctx.fillText(txt, x, y);
  ctx.restore();
}

特别是在函数中，如果txt大于txt，则需要将imgWidth拆分为较小的块，每个块的最大大小为imgWidth

Answer 1

不幸的是，画布没有考虑“ \ n”，因此您必须自己管理多行。

此处的示例：https://codesandbox.io/s/lucid-worker-zm0ct

来自输入变量“ txt”。（可能有一种更优雅的方法。）

  let lines = [];
  let lineCount = 0;
  let tmpTxt = txt.split(" ");
  lines[lineCount] = [];
  for(let t = 0; t < tmpTxt.length; t++){
    if(measureText(lines[lineCount].join(" "), font).width > ctx.canvas.width) {
      let lastItem = lines[lineCount].pop();
      lineCount++;
      lines[lineCount] = [lastItem];
    }
    lines[lineCount].push(tmpTxt[t]);
  }

然后，您将不得不用Y偏移量渲染每行，您可以通过编程从measureText（）。height

获得该偏移量。

  let offset = measureText(txt, font).height;
  for(let l = 0; l < lines.length; l++) {
    ctx.fillText(lines[l].join(" "), x, y + (l * offset));
  }

画布上很长的文本的多行拆分（添加换行符）

1 个答案: