垂直的波浪號

 好的，我明白你的意思了。你是想讓使用者在 <input type="text"> 框中輸入文字，然後 Canvas 會動態地將這些文字（包括可能出現的波浪號 ~）以垂直方式渲染出來，並且你無法預先知道波浪號的確切位置。

這種情況下，你需要：

  1. 監聽 <input> 的變化。

  2. 獲取輸入的完整文字內容。

  3. 逐字元渲染到 Canvas 上。

  4. 當遇到 ~ 字元時，對該字元進行旋轉繪製。

以下是如何實現這個功能的範例：

      <!DOCTYPE html>
<html>
<head>
<title>Dynamic Vertical Tilde on Canvas</title>
<style>
  body { margin: 20px; font-family: sans-serif; }
  canvas { border: 1px solid black; margin-top: 10px; }
  input[type="text"] { width: 300px; padding: 5px; margin-bottom: 10px; }
</style>
</head>
<body>

<label for="textInput">輸入文字 (包含 ~):</label><br>
<input type="text" id="textInput" value="Hello ~ World ~ Test">

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
  const textInput = document.getElementById('textInput');
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  const fontSize = 24; // 字型大小
  const lineHeight = fontSize * 1.2; // 行高，可以調整
  const charSpacing = 2; // 垂直排列時，字元之間的額外間距 (如果需要)
  const padding = 10; // Canvas 邊距

  function drawTextVertical(text) {
    // 清除畫布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.font = `${fontSize}px Arial`;
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center'; // 方便旋轉後的定位
    ctx.textBaseline = 'middle'; // 方便旋轉後的定位

    let currentX = padding + fontSize / 2; // 第一列的 X 中心位置
    let currentY = padding + fontSize / 2; // 第一個字元的 Y 中心位置

    for (let i = 0; i < text.length; i++) {
      const char = text[i];

      if (currentY + fontSize / 2 > canvas.height - padding) {
        // 超出畫布高度，換列
        currentY = padding + fontSize / 2;
        currentX += fontSize + charSpacing * 2; // 移到下一列
      }

      if (char === '~') {
        // 繪製垂直的波浪號
        ctx.save();
        ctx.translate(currentX, currentY);
        ctx.rotate(Math.PI / 2); // 旋轉90度
        ctx.fillText(char, 0, 0); // 在旋轉後的新原點繪製
        ctx.restore();
      } else {
        // 繪製其他普通字元 (也是垂直排列)
        // 如果其他字元也需要水平顯示，則不需要旋轉
        // 這裡假設所有字元都垂直排列，如果只有~垂直，則需要調整
        ctx.save();
        ctx.translate(currentX, currentY);
        // 如果希望其他字元也旋轉顯示，取消下一行的註解
        // ctx.rotate(Math.PI / 2);
        ctx.fillText(char, 0, 0); // 如果不旋轉，這裡的(0,0)就是相對於 currentX, currentY
        ctx.restore();
      }

      currentY += fontSize + charSpacing; // 移動到下一個字元的位置
    }
  }

  // 初始繪製
  drawTextVertical(textInput.value);

  // 監聽輸入框的 input 事件
  textInput.addEventListener('input', function() {
    drawTextVertical(this.value);
  });

  // 也可以監聽 change 事件，但 input 事件更即時
  // textInput.addEventListener('change', function() {
  //   drawTextVertical(this.value);
  // });

</script>

</body>
</html>

程式碼解釋：

  1. HTML 結構：

    • 一個 <input type="text"> 讓使用者輸入。

    • 一個 <canvas> 用於繪製。

  2. JavaScript：

    • fontSize, lineHeight, charSpacing, padding: 用於控制文字佈局的常數。

    • drawTextVertical(text) 函數：

      • ctx.clearRect(0, 0, canvas.width, canvas.height);: 每次重繪前清除畫布。

      • ctx.font, ctx.fillStyle, ctx.textAlign, ctx.textBaseline: 設定繪圖屬性。textAlign 和 textBaseline 設為 center 和 middle 有助於在 translate 和 rotate 後更容易將字元中心對準目標點。

      • currentX, currentY: 追蹤當前要繪製字元的中心座標。

      • 遍歷輸入文字 (for (let i = 0; i < text.length; i++))：

        • const char = text[i];: 取得當前字元。

        • 換列邏輯：if (currentY + fontSize / 2 > canvas.height - padding) 檢查是否需要換到下一列。

        • 判斷是否為波浪號 ~：

          • if (char === '~'): 如果是波浪號：

            • ctx.save(): 儲存狀態。

            • ctx.translate(currentX, currentY): 移動原點到字元中心。

            • ctx.rotate(Math.PI / 2): 旋轉90度。

            • ctx.fillText(char, 0, 0): 在旋轉後的 (0,0) 繪製波浪號。

            • ctx.restore(): 恢復狀態。

          • else: 如果是其他字元：

            • 這裡的範例也是將其他字元垂直排列（即每個字元單獨繪製在自己的垂直位置）。

            • 如果你希望其他字元是正常的水平方向，但整體文字流是從上到下、從左到右，那麼你需要修改這部分的邏輯，可能不需要為每個非 ~ 字元都進行 translate，而是直接調整 fillText 的 Y 座標，並且在遇到 ~ 時才特殊處理。

            • 目前的範例是將所有字元都視為獨立的垂直單元，如果 ~ 是一個長字串的一部分，且其他字元要水平顯示，那麼這個邏輯需要大幅調整。

        • currentY += fontSize + charSpacing;: 更新 Y 座標，準備繪製下一個字元。

    • 事件監聽：

      • textInput.addEventListener('input', ...): 當使用者在輸入框中輸入內容時，會觸發 input 事件，並重新呼叫 drawTextVertical 函數來更新 Canvas。

重要考慮點和可能的調整：

  1. 其他字元的顯示方式：

    • 目前範例：所有字元都是垂直排列的。 也就是說，"Hello" 會顯示成：

            H
e
l
l
o

    • 如果你的需求是： 文字整體是水平閱讀的，只有 ~ 這個符號本身是垂直的，例如："Hello ~ World" 應該顯示為 "Hello" (水平) 然後一個垂直的 ~，然後 "World" (水平)。
      這種情況下，邏輯會複雜得多。你需要：

      • 測量每個字元的寬度 (ctx.measureText(char).width)。

      • 維護一個水平的 currentX 和垂直的 currentY (用於換行)。

      • 當遇到 ~ 時，在其當前水平位置 currentX 繪製一個垂直的 ~，然後 currentX 需要增加 ~ 旋轉後所佔的「高度」（即原始字型大小）。

      • 對於其他字元，正常水平繪製，並更新 currentX。

  2. 精確的字元定位和間距：

    • ctx.measureText(char).width 可以用來獲取字元的寬度，這對於更精確的佈局（尤其是在混合水平和垂直字元時）非常重要。

    • 對於垂直的 ~，它旋轉後佔據的「寬度」實際上是原始字型的高度，而它佔據的「高度」是原始字元的寬度 (雖然 ~ 的寬度通常不大)。

  3. 複雜排版（如從右到左的文字或混合語言）：

    • 如果涉及到更複雜的排版需求，Canvas 的原生文字 API 可能會顯得吃力，你可能需要考慮使用更專業的文字渲染庫。

如果你希望文字是水平流動，只有 ~ 垂直，請告訴我，我可以提供一個針對該情況的調整版本。

目前的範例是基於「所有字元都垂直排列，遇到 ~ 就讓它旋轉90度」的假設。

留言

張貼留言

這個網誌中的熱門文章

Offscreen Canvas

 你說得完全正確！這是一個非常經典的效能最佳化思路。如果尖刺框的參數沒有改變，重複計算所有尖刺的路徑和幾何形狀確實是一種浪費。 有幾種方法可以「記憶」或快取你畫的尖刺框，避免不必要的重繪計算： 快取到一個離屏 Canvas (Offscreen Canvas) - 最推薦的方法 原理 ：創建一個與主 Canvas 大小相同（或者只需要能容納尖刺框的大小）的隱藏 Canvas。當尖刺框的參數改變時，或者第一次繪製時，將完整的尖刺框（包括尖刺和中間的填充橢圓）繪製到這個離屏 Canvas 上。 後續繪製 ：在主 Canvas 的每一幀渲染時，如果尖刺框的參數沒有改變，你只需要使用 ctx.drawImage() 將離屏 Canvas 的內容直接繪製到主 Canvas 的目標位置即可。這遠比重新計算和繪製所有尖刺要快得多。 優點 ： 效能提升顯著， drawImage 非常快。 代碼結構清晰，繪製邏輯和快取邏輯分離。 可以快取包含複雜效果（如漸層、陰影等）的圖形。 缺點 ： 需要額外的記憶體來儲存離屏 Canvas。對於大多數尖刺框來說，這通常不是問題。 如果尖刺框需要動態改變大小或位置，離屏 Canvas 的管理（重新創建或調整大小）需要考慮。 快取路徑指令 (Path2D Object) - 適用於路徑本身 原理 ： Path2D 物件可以儲存一系列的 Canvas 路徑指令（ moveTo , lineTo , ellipse , bezierCurveTo 等）。當尖刺框的參數改變時，你構建一個或多個 Path2D 物件來代表尖刺框的各個部分（例如，一個 Path2D 給中心橢圓，另一個給所有尖刺的集合）。 後續繪製 ：如果參數未變，你可以直接使用 ctx.fill(cachedPath) 或 ctx.stroke(cachedPath) 來繪製已儲存的路徑。 優點 ： 比重新執行所有 moveTo/lineTo 更快一些，因為路徑已經編譯好了。 記憶體佔用可能比離屏 Canvas 小。 缺點 ： Path2D 只儲存路徑，不儲存樣式（顏色、線寬等）。你仍然需要在繪製時設定 ctx.fillStyle , ctx.strokeStyle , ctx.lineWidth 。 對於你用 drawTaperedLine 繪製的填充錐形尖刺，...
閱讀完整內容

外部網頁新增 Google 日曆行程(URL模板)

  好的，從外部網頁新增 Google 日曆行程，最常用且最簡單的方法是使用 Google Calendar Event Publisher Guide 提供的 URL 模板 。這種方法不需要複雜的 API 整合或使用者授權流程 (OAuth)，只需要產生一個特殊格式的連結即可。 使用者點擊這個連結後，會被導向到他們自己的 Google 日曆，並看到一個預先填好資訊的新增行程頁面，他們只需要確認並儲存即可。 以下是詳細步驟和說明： 方法：使用 Google 日曆事件發布連結 (URL Template) 基本 URL 結構： https: //www.google.com/calendar/render?action=TEMPLATE 添加參數以預填行程資訊： 在基本 URL 後面加上 & 和 參數名稱=參數值 來指定行程細節。重要的參數包括： text : 行程標題 (必填) 。 範例： &text=團隊會議 dates : 行程開始和結束時間 (必填) 。格式非常重要，必須是 ISO 8601 格式，且 強烈建議使用 UTC (世界標準時間) ，以避免時區混淆。 特定時間格式： YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ (Z 表示 UTC) 範例 (2024年7月26日 UTC 下午 2:00 到 3:00)： &dates=20240726T140000Z/20240726T150000Z 全天事件格式： YYYYMMDD/YYYYMMDD (結束日期是 不包含 的那一天的日期，所以通常是開始日期加一天) 範例 (2024年7月27日全天)： &dates=20240727/20240728 location : 行程地點 。 範例： &location=台北101會議室 details : 行程說明或備註 。可以包含換行符號 ( \n )。 範例： &details=討論下一季專案規劃。\n請攜帶筆記型電腦。 sprop : 來源網站資訊 (可選，但建議加入)。 範例： &sprop=name:我的網站名稱&sprop=url:https://www.mywebsite.com add : 邀請的賓客 Email (可選)...
閱讀完整內容

計算 Canvas 文字最大字體

 好的，我將產生一個 HTML 頁面，其中包含一個 Canvas 元素和一個文字輸入框。當你在輸入框中輸入文字並點擊按鈕後，程式碼會自動計算出在指定的 Canvas 寬度內，該文字能夠完整顯示的最大字體大小，並將該字體大小的文字繪製在 Canvas 上。 <html> <head> <title>計算 Canvas 文字最大字體</title> <style> #myCanvas { border: 1px solid black; } </style> </head> <body> <div> <label for="inputText">輸入文字:</label> <input type="text" id="inputText" value="Hello"> </div> <div> <label for="canvasWidth">Canvas 寬度:</label> <input type="number" id="canvasWidth" value="300"> </div> <button id="calculateBtn">計算並繪製</button> <canvas id="myCanvas" width="300" height="100"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const inputText = document.getElementById('inputText...
閱讀完整內容