Fabric.js 实现变换视窗示例详解

　　目录

　　引言

　　可以通过 属性配置画布的视窗属性。

　　听上去很高级的样子，但其实这是原生 就已经存在的东西， 的 也就直接复用了原生 的 。

　　fabric.js 官方文档上也是这么说的

　　viewportTransform :Array

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

　　修改 常见例子就是拖拽画布（下一篇会讲到）。

　　本文粗略讲讲 的用法。

　　viewportTransform

　　是一个数组，里面有6个元素，默认值是 。

　　从下标0开始，它们分别代表：

　　你没看错，我也没写错，上面列出来的元素就是代表这个意思，这和原生 的 方法接收参数的顺序是一样的，看上去就是这么“凌乱”~

　　其实这涉及到线性代数的知识，在 中， 方法也可以称为“变换矩阵”。

　　我们把 的6个元素分别用 来代替：

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

　　然后这样排列一下，看上去会不会觉得没那么“凌乱”了。

　　和数学有关的知识暂时先不讲 （我也讲得不好） 。

　　学 最主要是动手实践，写多几次慢慢就能领悟其中原理。

　　的6个参数主要实现3个功能：缩放、倾斜、平移。

　　为了演示效果，我先初始化画布，并添加2个图形（矩形和三角形）。

　　缩放

　　根据前面的说明我们得知，要缩放画布可以修改 下标为 和 的元素。

　　如果希望x轴方向放大1倍可以这样做

　　// 省略部分代码

　　canvas.viewportTransform[0] = 2

　　如果想让y轴方向缩小1倍可以这样做

　　// 省略部分代码

　　canvas.viewportTransform[3] = 0.5

　　斜切

　　修改画布斜切，x轴方向是修改 下标 的元素，y轴方向修改下标为 的元素。

　　x轴方向斜切：

　　// 省略部分代码

　　canvas.viewportTransform[1] = 0.1

　　也可以设置成负数

　　// 省略部分代码

　　canvas.viewportTransform[1] = -0.1

　　y轴方向斜切

　　// 省略部分代码

　　canvas.viewportTransform[2] = 0.2

　　y轴方向的斜切也可以设置成负数，自己动手试试吧~

　　平移

　　平移只需设置 最后2个元素即可，非常好记。

　　x轴方向平移

　　// 省略部分代码

　　canvas.viewportTransform[4] = 10

　　看粉色的矩形，矩形默认的位置是 ，上面的代码把画布往右平移了 ，所以从视觉上看到的是矩形离画布左侧有20的距离，离顶部有10的距离。

　　除了设置正数，还可以设置负数， 设置成负数就是往左移动。

　　y轴方向平移

　　// 省略部分代码

　　canvas.viewportTransform[5] = 10

　　setViewportTransform(vpt)

　　除了有 ，还有 方法，这个方法的参数接收一个数组，数组元素的意义和 差不多。

　　需要注意的是， 是属性。

　　是方法，这个方法是要传入参数的。

　　因为这两个的用法都很像，这里就不再啰嗦了。

　　代码仓库

　　⭐viewportTransform

　　以上就是Fabric.js 实现变换视窗示例详解的详细内容，更多关于Fabric.js 变换视窗的资料请关注脚本之家其它相关文章！

　　您可能感兴趣的文章: