本文简介

点赞 + 关注 + 珍藏 = 学会了


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 管制元素层级》

《Fabric.js 动静设置字号大小》

《Fabric.js 激活输入框》

《Fabric.js 自在绘制椭圆》


点赞 + 关注 + 珍藏 = 学会了
代码仓库