如何在Word中批量添加填空題的下劃線？

日常工作中，經常需要在原有的Word文檔基礎上，將指定內容抹去，變成供填充內容的下劃線，如下，將下圖中的以下所有<>及其包含的內容替換成下劃線；

續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第20天，點擊查看活動詳情

本文簡介

點贊 + 關注 + 收藏 = 學會了

在 HTML 也好，Word 也好，基本都有下劃線和刪除線（中劃線）。

Fabric.js 作為一個老牌 canvas 庫，當然也提供中劃線和下劃線的配置啦，除此之外還提供了上劃線的配置。

本文要講解的就是這3種裝飾線在 fabric.js 中的使用方法。除了初始化配置外，還支持項目運行時，讓用戶動態配置。

本文案例使用了 IText ，該組件支持編輯功能。

初始化時設置

這是上劃線、中劃線和下劃線的文檔：

上劃線 overline
中劃線 linethrough
下劃線 underline

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<script src="../../script/fabric.5.2.1.js"></script>
<script>
  const canvas = new fabric.Canvas('c')

  const iText = new fabric.IText('aaa',{
    styles: {
      0: {
        0: { overline: true }, // 上劃線
        1: { linethrough: true }, // 中劃線
        2: { underline: true } // 下劃線
      }
    }
  })

  canvas.add(iText)
</script>

本例只有3個字母 a ，而且都在同一行。

styles 第一個元素的 key 為 0 的意思是第一行，行號下標從0開始。

大概這個意思

styles: {
  0: { // 第1行
    0:, // 第1行 第1個字
    1:, // 第1行 第2個字
    2:  // 第1行 第3個字
  }
}

如果需要換行，那就要根據行號來定義了。換行的方法是文本內容里使用 \n 做換行。

動態設置

除了在初始化時可以設置裝飾線外，Fabric.js 也提供了在運行時用戶手動設置。不過代碼會稍微復雜一點。

其實動態設置上劃線、中劃線和下劃線的操作都是一樣的，唯一要變的就是屬性名。

我以中劃線為例，之后上劃線和下劃線只需改個屬性名。

<button onclick="linethrough()">中劃線</button>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入fabric -->
<script src="../../script/fabric.5.2.1.js"></script>
<script>
  const canvas = new fabric.Canvas('c') // 初始化畫布

  const iText = new fabric.IText('hello wor\nld') // 創建文字

  canvas.add(iText)

  function linethrough() {
    let activeTxt = canvas.getActiveObject() // 獲取當前選中的文字

    // 如果當前沒選中文字，那什么都不操作
    if (!activeTxt) return

    // 判斷當前是否進入編輯狀態
    if (activeTxt.isEditing) {
      // 編輯狀態
      const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true)

      // 如果當前
      if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) {
        // 如果當前已經設置了中劃線，那就把全局中劃線取消
        activeTxt.setSelectionStyles({ 'linethrough': false })
      } else {
        // 如果當前沒設置中劃線，那就添加上中劃線
        activeTxt.setSelectionStyles({ 'linethrough': true })
      }
    } else {
      // 選擇狀態
      if (activeTxt['linethrough'] === true) {
        activeTxt.linethrough = false
        activeTxt.dirty = true;
        let s = activeTxt.styles
        for(let i in s) {
          for (let j in s[i]) {
            s[i][j].linethrough = false
          }
        }
      } else {
        activeTxt.linethrough = true
        activeTxt.dirty = true;
        let s = activeTxt.styles
        for(let i in s) {
          for (let j in s[i]) {
            s[i][j].linethrough = true
          }
        }
      }
    }

    canvas.renderAll()
  }
</script>

上面的代碼主要做這幾步操作：

初始化畫布
創建文字
將文字添加到畫布中
linethrough 方法添加或取消中劃線

最主要的操作邏輯寫在 linethrough 方法里了。

linethrough 的邏輯如下

獲取當前選中的文字
如果沒選中就不做任何操作
如果選中了，判斷是否進入編輯狀態
編輯狀態獲取當前被選中文字的中劃線狀態如果被選中文字設置了中劃線，就把中劃線取消掉如果被選中文字沒設置中劃線，就添加中劃線
如果不是編輯狀態，只是單擊了 iText 進入框選狀態如果需要全局取消中劃線全局取消循環每個字符，并取消每個字符的中劃線需要全局設置中劃線全局設置再逐個字符單獨設置
重新渲染畫布