Zenn
Closed1

Canvas上で文字列の折り返しと溢れ出た文をellipsisに置き換えるスニペットコード

JavaScript
#
canvas
sarutabikosarutabiko

OG画像を作る上でCanvasの上に文字列書く時に溢れた文をellipsis "..."にする必要があった.
が、cssのように勝手にやってくれないので、手実装が必要.

truncateString

まずは、溢れ出る文字列を...で置き換える処理

function truncateString(str) {
  if (str.length <= 1) {
    return str
  } else {
    return str.slice(0, -1) + "...";
  }
}

wrapText

つぎに、幅やcontextと文字列を与えて、
実際に使った高さを返す関数.

1文字ずつ取り出して、testLineに繋げていき、maxWidthをmeasureTextで測った結果超えた場合に、
その文字列をfillTextで書き出す.

末尾で文字列がなければ、高さを1として返しているが、これは不要かも


function wrapText(context, text, x, y, maxWidth, maxLine, lineHeight) {
  var words = text.split("");
  var line = "";
  let lineNum = 0;

  for (var n = 0; n < words.length; n++) {
    var testLine = line + words[n];
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      lineNum++;
      if (lineNum >= maxLine) {
        line = truncateString(line);
        break;
      } else {
        context.fillText(line, x, y);
        line = words[n];
        y += lineHeight;
      }
    } else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);

  if (lineNum == 0) {
    lineNum++;
  }

  return lineNum * lineHeight;
}
このスクラップは2023/10/15にクローズされました