引言

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

聽上去很高級的樣子，但其實這是原生 canvas 就已經(jīng)存在的東西，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 是一個數(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ù)的。

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

代碼倉庫

?viewportTransform

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

最新評論