关于前端:Fabricjs-变换视窗

本文简介

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

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 自在绘制椭圆》

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