Reactjs 画布上超长文本的多行分割（添加换行符）

我在这里有一个工作示例

因为上面的文字很长，所以它延伸到两端。我试图将文本动态分割成多行，以便根据图像大小和输入文本的长度来调整它们

当文本比图像宽度长得多时，如何将其拆分为多行

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

大于

imgWidth

，我需要将

txt

分割成更小的块，每个块的最大大小

imgWidth

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

示例如下：

来自输入变量“txt”。（可能有一种更优雅的方式来实现这一点。）

let line=[]；
设lineCount=0；
让tmpTxt=txt.split（“”）；
行数[行数]=[]；
for（设t=0；tctx.canvas.width）{
设lastItem=lines[lineCount].pop（）；
lineCount++；
行[lineCount]=[lastItem]；
}
行[lineCount].push（tmpTxt[t]）；
}

然后，您必须使用Y偏移量渲染每一行，您可以通过编程方式从measureText（）.height获得Y偏移量

let offset=measureText（txt，字体）。高度；
for（设l=0；l

  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]);
  }

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