Fabric.js 實現變換視窗範例詳解

2022-09-16 22:03:51

引言

fabric.js 可以通過 viewportTransform 屬性設定畫布的視窗屬性。

聽上去很高階的樣子，但其實這是原生 canvas 就已經存在的東西，fabric.js 的 viewportTransform 也就直接複用了原生 canvas 的 transform() 。

fabric.js 官方檔案上也是這麼說的

viewportTransform :Array

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

修改 viewportTransform 常見例子就是拖拽畫布（下一篇會講到）。

本文粗略講講 viewportTransform 的用法。

viewportTransform

viewportTransform 是一個陣列，裡面有6個元素，預設值是 [1, 0, 0, 1, 0, 0]。

從下標0開始，它們分別代表：

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

你沒看錯，我也沒寫錯，上面列出來的元素就是代表這個意思，這和原生 canvas 的 transform() 方法接收引數的順序是一樣的，看上去就是這麼“凌亂”~

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

我們把 viewportTransform 的6個元素分別用 a, b, c, d, e, f 來代替：

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

然後這樣排列一下，看上去會不會覺得沒那麼“凌亂”了。

和數學有關的知識暫時先不講（我也講得不好）。

學 fabric.js 最主要是動手實踐，寫多幾次慢慢就能領悟其中原理。

viewportTransform 的6個引數主要實現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>

縮放

根據前面的說明我們得知，要縮放畫布可以修改 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

也可以設定成負數

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

y軸方向斜切

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

y軸方向的斜切也可以設定成負數，自己動手試試吧~

平移

平移只需設定 viewportTransform 最後2個元素即可，非常好記。

x軸方向平移

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

看粉色的矩形，矩形預設的位置是 top 10， left 10，上面的程式碼把畫布往右平移了 10 ，所以從視覺上看到的是矩形離畫布左側有20的距離，離頂部有10的距離。

除了設定正數，還可以設定負數，canvas.viewportTransform[4] 設定成負數就是往左移動。

y軸方向平移

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

setViewportTransform(vpt)

除了有 viewportTransform ，還有 setViewportTransform 方法，這個方法的引數接收一個陣列，陣列元素的意義和 viewportTransform 差不多。

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

setViewportTransform 是方法，這個方法是要傳入引數的。

因為這兩個的用法都很像，這裡就不再囉嗦了。

程式碼倉庫

⭐viewportTransform

以上就是Fabric.js 實現變換視窗範例詳解的詳細內容，更多關於Fabric.js 變換視窗的資料請關注it145.com其它相關文章！

Fabric.js 實現變換視窗範例詳解

目錄

引言

viewportTransform

縮放

斜切

平移

setViewportTransform(vpt)

熱門文章