引言

fabric.js 可以通過(guò) viewportTransform 屬性配置畫布的視窗屬性。

聽(tīng)上去很高級(jí)的樣子，但其實(shí)這是原生 canvas 就已經(jīng)存在的東西，fabric.js 的 viewportTransform 也就直接復(fù)用了原生 canvas 的 transform() 。

fabric.js 官方文檔上也是這么說(shuō)的

viewportTransform :Array

The transformation (a Canvas 2D API transform matrix) which focuses the viewport

修改 viewportTransform 常見(jiàn)例子就是拖拽畫布（下一篇會(huì)講到）。

本文粗略講講 viewportTransform 的用法。

viewportTransform

viewportTransform 是一個(gè)數(shù)組，里面有6個(gè)元素，默認(rèn)值是 [1, 0, 0, 1, 0, 0]。

從下標(biāo)0開(kāi)始，它們分別代表：

• [0]: 水平縮放（x軸方向）
• [1]: 水平傾斜（x軸方向）
• [2]: 垂直傾斜（y軸方向）
• [3]: 垂直縮放（y軸方向）
• [4]: 水平移動(dòng)（x軸方向）
• [5]: 垂直移動(dòng)（y軸方向）

你沒(méi)看錯(cuò)，我也沒(méi)寫錯(cuò)，上面列出來(lái)的元素就是代表這個(gè)意思，這和原生 canvas 的 transform() 方法接收參數(shù)的順序是一樣的，看上去就是這么“凌亂”~

其實(shí)這涉及到線性代數(shù)的知識(shí)，在 canvas 中，transform() 方法也可以稱為“變換矩陣”。

我們把 viewportTransform 的6個(gè)元素分別用 a, b, c, d, e, f 來(lái)代替：

viewportTransform[a, b, c, d, e, f] 。

然后這樣排列一下，看上去會(huì)不會(huì)覺(jué)得沒(méi)那么“凌亂”了。

和數(shù)學(xué)有關(guān)的知識(shí)暫時(shí)先不講 （我也講得不好） 。

學(xué) fabric.js 最主要是動(dòng)手實(shí)踐，寫多幾次慢慢就能領(lǐng)悟其中原理。

viewportTransform 的6個(gè)參數(shù)主要實(shí)現(xiàn)3個(gè)功能：縮放、傾斜、平移。

為了演示效果，我先初始化畫布，并添加2個(gè)圖形（矩形和三角形）。

<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, // 底邊長(zhǎng)度
    height: 100, // 底邊到對(duì)角的距離
    fill: 'blue'
  })
  // 文本
  let text = new fabric.Text('雷猴', {
    top: 240,
    left: 100
  })
  // 將矩形、三角形、文本添加到畫布中
  canvas.add(rect, triangle, text)
</script>

縮放

根據(jù)前面的說(shuō)明我們得知，要縮放畫布可以修改 viewportTransform 下標(biāo)為 0 和 3 的元素。

如果希望x軸方向放大1倍可以這樣做

// 省略部分代碼
canvas.viewportTransform[0] = 2

如果想讓y軸方向縮小1倍可以這樣做

// 省略部分代碼
canvas.viewportTransform[3] = 0.5

斜切

修改畫布斜切，x軸方向是修改 viewportTransform 下標(biāo) 1 的元素，y軸方向修改下標(biāo)為 2 的元素。

x軸方向斜切：

// 省略部分代碼
canvas.viewportTransform[1] = 0.1

也可以設(shè)置成負(fù)數(shù)

// 省略部分代碼
canvas.viewportTransform[1] = -0.1

y軸方向斜切

// 省略部分代碼
canvas.viewportTransform[2] = 0.2

y軸方向的斜切也可以設(shè)置成負(fù)數(shù)，自己動(dòng)手試試吧~

平移

平移只需設(shè)置 viewportTransform 最后2個(gè)元素即可，非常好記。

x軸方向平移

// 省略部分代碼
canvas.viewportTransform[4] = 10

看粉色的矩形，矩形默認(rèn)的位置是 top 10， left 10，上面的代碼把畫布往右平移了 10 ，所以從視覺(jué)上看到的是矩形離畫布左側(cè)有20的距離，離頂部有10的距離。

除了設(shè)置正數(shù)，還可以設(shè)置負(fù)數(shù)，canvas.viewportTransform[4] 設(shè)置成負(fù)數(shù)就是往左移動(dòng)。

y軸方向平移

// 省略部分代碼
canvas.viewportTransform[5] = 10

setViewportTransform(vpt)

除了有 viewportTransform ，還有 setViewportTransform 方法，這個(gè)方法的參數(shù)接收一個(gè)數(shù)組，數(shù)組元素的意義和 viewportTransform 差不多。

需要注意的是，viewportTransform 是屬性。

setViewportTransform 是方法，這個(gè)方法是要傳入?yún)?shù)的。

因?yàn)檫@兩個(gè)的用法都很像，這里就不再啰嗦了。

代碼倉(cāng)庫(kù)

?viewportTransform

以上就是Fabric.js 實(shí)現(xiàn)變換視窗示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 變換視窗的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論