Fabric.js 實現(xiàn)變換視窗示例詳解
引言
fabric.js
可以通過 viewportTransform
屬性配置畫布的視窗屬性。
聽上去很高級的樣子,但其實這是原生 canvas
就已經(jīng)存在的東西,fabric.js
的 viewportTransform
也就直接復用了原生 canvas
的 transform()
。
fabric.js 官方文檔上也是這么說的
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
修改 viewportTransform
常見例子就是拖拽畫布(下一篇會講到)。
本文粗略講講 viewportTransform
的用法。
viewportTransform
viewportTransform
是一個數(shù)組,里面有6個元素,默認值是 [1, 0, 0, 1, 0, 0]
。
從下標0開始,它們分別代表:
[0]
: 水平縮放(x軸方向)[1]
: 水平傾斜(x軸方向)[2]
: 垂直傾斜(y軸方向)[3]
: 垂直縮放(y軸方向)[4]
: 水平移動(x軸方向)[5]
: 垂直移動(y軸方向)
你沒看錯,我也沒寫錯,上面列出來的元素就是代表這個意思,這和原生 canvas
的 transform()
方法接收參數(shù)的順序是一樣的,看上去就是這么“凌亂”~
其實這涉及到線性代數(shù)的知識,在 canvas
中,transform()
方法也可以稱為“變換矩陣”。
我們把 viewportTransform
的6個元素分別用 a, b, c, d, e, f
來代替:
viewportTransform[a, b, c, d, e, f] 。
然后這樣排列一下,看上去會不會覺得沒那么“凌亂”了。
和數(shù)學有關(guān)的知識暫時先不講 (我也講得不好) 。
學 fabric.js
最主要是動手實踐,寫多幾次慢慢就能領(lǐng)悟其中原理。
viewportTransform
的6個參數(shù)主要實現(xiàn)3個功能:縮放、傾斜、平移。
為了演示效果,我先初始化畫布,并添加2個圖形(矩形和三角形)。
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas> <script> // 初始化畫布 let canvas = new fabric.Canvas('canvasBox', { width: 400, height: 400 }) // 矩形 let rect = new fabric.Rect({ top: 10, left: 10, width: 80, height: 80, fill: 'pink' }) // 三角形 let triangle = new fabric.Triangle({ top: 100, left: 100, width: 80, // 底邊長度 height: 100, // 底邊到對角的距離 fill: 'blue' }) // 文本 let text = new fabric.Text('雷猴', { top: 240, left: 100 }) // 將矩形、三角形、文本添加到畫布中 canvas.add(rect, triangle, text) </script>
縮放
根據(jù)前面的說明我們得知,要縮放畫布可以修改 viewportTransform
下標為 0
和 3
的元素。
如果希望x軸方向放大1倍可以這樣做
// 省略部分代碼 canvas.viewportTransform[0] = 2
如果想讓y軸方向縮小1倍可以這樣做
// 省略部分代碼 canvas.viewportTransform[3] = 0.5
斜切
修改畫布斜切,x軸方向是修改 viewportTransform
下標 1
的元素,y軸方向修改下標為 2
的元素。
x軸方向斜切:
// 省略部分代碼 canvas.viewportTransform[1] = 0.1
也可以設(shè)置成負數(shù)
// 省略部分代碼 canvas.viewportTransform[1] = -0.1
y軸方向斜切
// 省略部分代碼 canvas.viewportTransform[2] = 0.2
y軸方向的斜切也可以設(shè)置成負數(shù),自己動手試試吧~
平移
平移只需設(shè)置 viewportTransform
最后2個元素即可,非常好記。
x軸方向平移
// 省略部分代碼 canvas.viewportTransform[4] = 10
看粉色的矩形,矩形默認的位置是 top 10, left 10
,上面的代碼把畫布往右平移了 10
,所以從視覺上看到的是矩形離畫布左側(cè)有20的距離,離頂部有10的距離。
除了設(shè)置正數(shù),還可以設(shè)置負數(shù),canvas.viewportTransform[4]
設(shè)置成負數(shù)就是往左移動。
y軸方向平移
// 省略部分代碼 canvas.viewportTransform[5] = 10
setViewportTransform(vpt)
除了有 viewportTransform
,還有 setViewportTransform
方法,這個方法的參數(shù)接收一個數(shù)組,數(shù)組元素的意義和 viewportTransform
差不多。
需要注意的是,viewportTransform
是屬性。
setViewportTransform
是方法,這個方法是要傳入?yún)?shù)的。
因為這兩個的用法都很像,這里就不再啰嗦了。
代碼倉庫
以上就是Fabric.js 實現(xiàn)變換視窗示例詳解的詳細內(nèi)容,更多關(guān)于Fabric.js 變換視窗的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Blob實現(xiàn)與File?DataURL?canvas相互轉(zhuǎn)換示例
這篇文章主要為大家介紹了Blob實現(xiàn)與File?DataURL?canvas相互轉(zhuǎn)換的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06JS實現(xiàn)刷新網(wǎng)頁后之前瀏覽位置保持不變示例詳解
這篇文章主要為大家介紹了JS實現(xiàn)刷新網(wǎng)頁后之前瀏覽位置保持不變示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08