說明

ctx.font = "30px sans-serif" //文字字型 大小
ctx.fillStyle="#00A0E9" // 文字填滿顏色
ctx.strokeStyle="#D50A17" // 文字邊框
ctx.fillText("...", 10, 100) //填滿文字 位置
ctx.strokeText("", 10, 150) // 邊框文字

fillText()

該CanvasRenderingContext2D方法 fillText()，畫布2D API的一部分，在指定的坐標繪製的文本字符串，與當前的填充字符串的字符 fillStyle。一個可選參數允許指定渲染文本的最大寬度，用戶代理將通過壓縮文本或使用較小的字體大小來實現。

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

const handleMouseDown = ()=>{
  case "text":
    ctx.font = "50px serif";
    ctx.fillText("你好", point?.x, point?.y);
    break;
 }

思考

簡單來說，在canvas填上文字只需要使用fillText，但在小畫家上面，我們需要的是能夠輸入文字！所以我們要將點擊的位置改為建立一個輸入框框，在按下enter後，能夠完成輸入，來看看如何實作吧。

點擊

改寫剛才的點擊行為

const handleMouseDown = ()=>{
  case "text":
     addText(event.clientX, event.clientY, point);
        break;
 }

/** 建立一個輸入匡 */
  const addText = (x: number, y: number, point: any) => {
    const input = document.createElement("input");
    input.type = "textarea";
    input.style.position = "fixed";
    input.style.left = x - 4 + "px";
    input.style.top = y - 4 + "px";
    input.style.zIndex = "100";
    input.onkeydown = (event) => handleEnter(event, input, point);
    document.body.appendChild(input);
    input.focus();
  };

/** 控制完成輸入 */
  const handleEnter = (event: any, input: any, point: pointIF) => {
    const keyCode = event.keyCode;
    if (keyCode === 13) {
      drawText(input.value, point.x, point.y);
      document.body.removeChild(input);
    }
  };

/** 完成輸入後繪製到 canvas 上 */
  function drawText(txt: string, x: any, y: any) {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.textBaseline = "top";
    ctx.textAlign = "left";
    ctx.font = "14px sans-serif";
    ctx.fillText(txt, x - 4, y - 4);
  }

接下來只需要改寫樣式跟控制框框大小就可以完成啦！