Fabric.js viewportTransform 变换矩阵详解

引言

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 变换视窗的资料请查阅本站其他相关文章！