广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Fabric.js实现变换视窗示例详解
  • 824
分享到

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

2024-04-02 19:04:59 824人浏览 薄情痞子
摘要

目录引言viewportTransfORM缩放斜切平移setViewportTransform(vpt)引言 fabric.js 可以通过 viewportTransform 属性配

引言

fabric.js 可以通过 viewportTransform 属性配置画布的视窗属性。

听上去很高级的样子,但其实这是原生 canvas 就已经存在的东西,fabric.jsviewportTransform 也就直接复用了原生 canvastransform()

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轴方向)

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

其实这涉及到线性代数的知识,在 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 下标为 03 的元素。

如果希望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 变换视窗的资料请关注编程网其它相关文章!

--结束END--

本文标题: Fabric.js实现变换视窗示例详解

本文链接: https://www.lsjlt.com/news/167539.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作