Day 17 - canvas 文字换行

程序码

今天来学习文字换行

export default function App() {
  const canvasRef = useRef(null);
  useEffect(() => {
    if (canvasRef?.current) {
      const canvas = canvasRef?.current;
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "gray";
      ctx.font = "30px Arial";
      ctx.lineWidth = 1;
      const str =
        "来到第十七篇了罗！铁人赛真的好辛苦！！神人们真的太神了～～～～";
      ctx.fillText(str, 0, 50);
    }
  }, [canvasRef]);

  return (
    <div className="App">
      <canvas
        ref={canvasRef}
        id="canvas"
        style={{ border: "solid 1px blue" }}
        width="300"
        height="300"
      ></canvas>
    </div>
  );
}

在一般填上文字的时候，是无法自己换行的，需要进行运算才可以达到完整显示文字的效果。

  /*
str:要绘制的字串
canvas:canvas物件
initX:绘制字串起始x座标
initY:绘制字串起始y座标
lineHeight:字行高，自己定义个值即可
*/
  const canvasTextAutoLine = (str, canvas, initX, initY, lineHeight) => {
    var ctx = canvas.getContext("2d");
    var lineWidth = 0;
    var canvasWidth = canvas.width;
    var lastSubStrIndex = 0;
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width;
      if (lineWidth > canvasWidth - initX) {
        //减去initX,防止边界出现的问题
        ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
        initY += lineHeight;
        lineWidth = 0;
        lastSubStrIndex = i;
      }
      if (i === str.length - 1) {
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
      }
    }
  };

把刚才的 fillText 替换成 canvasTextAutoLine，从程序码可以发现，我们使用宽度与文字去计算，超过就进行换行，来达到效果。

完成啦～～～

完整程序码 codesandbox

碎碎念时间

前两篇因为时间的关系，给自己太难得题目，白天又忙得不可开交，造成无法做出成果，如果未来几天还有时间会回头补上... ，不知不觉已经过了二分之一的赛程了，再接再厉！