整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
日常工作中，經常需要在原有的Word文檔基礎上，將指定內容抹去，變成供填充內容的下劃線，如下，將下圖中的以下所有<>及其包含的內容替換成下劃線；
續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第20天，點擊查看活動詳情
點贊 + 關注 + 收藏 = 學會了
在 HTML 也好，Word 也好，基本都有下劃線和刪除線（中劃線）。
Fabric.js 作為一個老牌 canvas 庫，當然也提供中劃線和下劃線的配置啦，除此之外還提供了上劃線的配置。
本文要講解的就是這3種裝飾線在 fabric.js 中的使用方法。除了初始化配置外，還支持項目運行時，讓用戶動態配置。
本文案例使用了 IText ，該組件支持編輯功能。
這是上劃線、中劃線和下劃線的文檔：
<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 的邏輯如下
?IText 動態設置裝飾線
https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html
端網頁的開發中總是不可避免會使用到超鏈接，但是使用超鏈接時下面都會有一條下劃線，這在網頁中有時會顯得很突兀，不合適也不美觀，所以我們就需要將超鏈接下的這條下劃線給去掉.接下來給大家介紹Html下超鏈接去掉下劃線的方法
您可以使用CSS的text-decoration屬性來去掉超鏈接下劃線。只需將其設置為none即可，示例代碼如下:
a{
text-decoration: none;
}
這會將頁面中所有超錐接下劃線都去，如果您只想去掉某些超鏈接的下劃線，可以為這些鏈接添加一個特定的class，并針對該CIass設置上述CSS屬性。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css超鏈接去掉下劃線示例</title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">大家再看我還有沒有下劃線了！</a>
</body>
</html>
可以發現，此時文本超鏈接下劃線是不是已經去掉了？這個效果實現是不是非常簡單呢？大家主要掌握一個樣式屬性就是text-decoration: none;這個屬性。給對應的a標簽文本添加這個屬性就可以去除文本超鏈接下劃線了。
擴展資料：
HTML 超鏈接(鏈接)的屬性：
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
我們通過使用 標簽在 HTML 中創建鏈接。
有兩種使用 標簽的方式：
1、通過使用 href 屬性 - 創建指向另一個文檔的鏈接；
2、通過使用 name 屬性 - 創建文檔內的書簽。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
