整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
續(xù)創(chuàng)作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰(zhàn)」的第20天，點擊查看活動詳情
點贊 + 關(guān)注 + 收藏 = 學(xué)會了
在 HTML 也好，Word 也好，基本都有下劃線和刪除線（中劃線）。
Fabric.js 作為一個老牌 canvas 庫，當(dāng)然也提供中劃線和下劃線的配置啦，除此之外還提供了上劃線的配置。
本文要講解的就是這3種裝飾線在 fabric.js 中的使用方法。除了初始化配置外，還支持項目運(yùn)行時，讓用戶動態(tài)配置。
本文案例使用了 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 的意思是第一行，行號下標(biāo)從0開始。
大概這個意思
styles: {
0: { // 第1行
0:, // 第1行 第1個字
1:, // 第1行 第2個字
2: // 第1行 第3個字
}
}
如果需要換行，那就要根據(jù)行號來定義了。換行的方法是文本內(nèi)容里使用 \n 做換行。
除了在初始化時可以設(shè)置裝飾線外，F(xiàn)abric.js 也提供了在運(yùn)行時用戶手動設(shè)置。不過代碼會稍微復(fù)雜一點。
其實動態(tài)設(shè)置上劃線、中劃線和下劃線的操作都是一樣的，唯一要變的就是屬性名。
我以中劃線為例，之后上劃線和下劃線只需改個屬性名。
<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') // 創(chuàng)建文字
canvas.add(iText)
function linethrough() {
let activeTxt = canvas.getActiveObject() // 獲取當(dāng)前選中的文字
// 如果當(dāng)前沒選中文字，那什么都不操作
if (!activeTxt) return
// 判斷當(dāng)前是否進(jìn)入編輯狀態(tài)
if (activeTxt.isEditing) {
// 編輯狀態(tài)
const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true)
// 如果當(dāng)前
if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) {
// 如果當(dāng)前已經(jīng)設(shè)置了中劃線，那就把全局中劃線取消
activeTxt.setSelectionStyles({ 'linethrough': false })
} else {
// 如果當(dāng)前沒設(shè)置中劃線，那就添加上中劃線
activeTxt.setSelectionStyles({ 'linethrough': true })
}
} else {
// 選擇狀態(tài)
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 動態(tài)設(shè)置裝飾線
https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html
在不知道寫點啥好了,打算寫一篇糊弄糊弄觀眾.
不要以為我起的標(biāo)題沒有意義啊,即便是糊弄那也是有一定價值滴.
先來討論下,刪除inline樣式有個毛的意義呢?其實意義大了,據(jù)我多年的項目經(jīng)驗,老有那么一小撮人喜歡在HTML中寫樣式(Me Too),導(dǎo)致后期項目調(diào)整的時候需要花部分時間整理樣式.
好的,那么標(biāo)題的作用就來了
$("*[style]").attr("style", "");
最省事的方法就是使用jQuery干掉所有的內(nèi)置樣式,避免了修改html的麻煩從而屏蔽掉沖突的問題進(jìn)而從容的修改樣式表.哎呀我去,這排比句用的,我看我也蒙.
行了,知道大概針對啥樣的問題就沒毛病,如果你不關(guān)注我,那么老鐵,扎心了啊~
文字添加刪除線方法有兩種，一種是使用html刪除線標(biāo)簽<s>；另外一種是使用css刪除線樣式text-decoration：line-through。
html標(biāo)簽實現(xiàn)刪除線樣式
1，使用標(biāo)簽
< s > 我被加刪除線</ s >
2，css刪除線樣式實現(xiàn)刪除線效果
使用css實現(xiàn)刪除線樣式屬性單詞text-decoration：line-through
使用CSS text-decoration 屬性 可以添加刪除線
text-decoration定義和用法：
text-decoration 屬性規(guī)定添加到文本的修飾。
注釋：修飾的顏色由 “color” 屬性設(shè)置。
說明：這個屬性允許對文本設(shè)置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。
text-decoration可能的值：
none默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline定義文本下的一條線。
overline定義文本上的一條線。
line-through定義穿過文本下的一條線。
blink定義閃爍的文本。
inherit規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。
前端設(shè)計模式-面試題
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
