Fabric.js|Fabric.js 居中元素
本文简介
点赞 + 关注 + 评论 = 学会了
在使用 Fabric.js 开发时，可能会需要将元素居中。
本文总结了 Fabric.js 常用的将元素居中的方法，其中包括：
- 基于视窗的水平居中
- 基于画布的水平居中
- 带动画效果的水平居中
- 基于视窗的垂直居中
- 基于画布的垂直居中
- 带动画效果的垂直居中
- 同时实现水平和垂直居中（也是分基于视窗或基于画布的）
除此之外，还总结了 在画布层面居中指定元素 和 元素自身调用居中方法 。
阅读本文需要你有一定的
Fabric.js 基础，如果还不太了解 Fabric.js 是什么，可以阅读 《Fabric.js 从入门到膨胀》创建基础项目 为了方便演示，我在初始化画布的时：
- 添加一个背景图，该背景图的尺寸和初始化的画布一样大。
- 添加一个矩形，之后要居中的对象就是它了。
- 添加鼠标滚轮滚动时缩放画布（方便演示 基于视窗 和 基于画布 的区别）。
- 添加鼠标拖拽画布平移位置（方便演示 基于视窗 和 基于画布 的区别）。
文章图片
代码有点多，但
滚轮滚动时可修改画布缩放等级 和 拖拽画布 部分其实可以不要的，写上这些代码主要是为了方便演示。以下所有例子中所指的元素都是 rect ，因为本例以 rect 进行讲解。你需要根据实际项目中要操作的对象进行调整。
水平居中 将指定元素水平居中。
基于视窗
文章图片
上面我写了2中方法，方法1是用画布操作指定的对象；方法2是元素自己根据视窗来调整自己的位置。
我直接上图来解释一下什么是 根据视窗水平居中元素
缩放的情况
文章图片
移动画布的情况
文章图片
在缩放和移动画布之后，
canvas.viewportCenterObjectH 和 rect.viewportCenterH 还是会根据根据视窗的标准来水平居中。基于画布
文章图片
// 省略部分代码
canvas.centerObjectH(rect)// 元素自己根据画布进行居中
// rect.centerH()缩放的情况
文章图片
移动画布的情况
【Fabric.js|Fabric.js 居中元素】
文章图片
可以和 基于视窗 的效果对比一下。
带动画效
文章图片
// 省略部分代码
canvas.fxCenterObjectH(rect)带动画的效果需要在画布中调用
fxCenterObjectH 方法。带动画效果的居中是根据画布来居中的，并非视窗！垂直居中 垂直居中和水平居中的用法差不多，只是改了一下api。水平居中是用 “H” ，垂直居中用 “V”。
基于视窗
文章图片
// 省略部分代码canvas.viewportCenterObjectV(rect)// 元素自己根据视窗进行居中
// rect.viewportCenterV()基于画布
// 省略部分代码canvas.centerObjectH(rect)// 元素自己根据画布进行居中
// rect.centerH()带动画效果
文章图片
// 省略部分代码canvas.fxCenterObjectV(rect)水平 + 垂直 同时居中
Fabric.js 还提供同时水平和垂直居中的功能。基于视窗
文章图片
// 省略部分代码canvas.viewportCenterObject(rect)// 元素自己根据视窗进行居中
// rect.viewportCenter()基于画布
文章图片
// 省略部分代码canvas.centerObject(rect)// 元素自己根据画布进行居中
rect.center()带动画效果
暂时还没发现同时垂直和水平居中有带动画效果的api，所以可以尝试同时调用
fxCenterObjectH 和 fxCenterObjectV
文章图片
// 省略部分代码function fxCenter() {
canvas.fxCenterObjectH(rect)
canvas.fxCenterObjectV(rect)
}代码仓库 ?Fabric 居中元素
推荐阅读 《Fabric.js 上标和下标的使用偏方》
《Fabric.js 缩放画布》
《Fabric.js 笔刷到底怎么用？》
点赞 + 关注 + 收藏 = 学会了
推荐阅读
- Fabric.js|Fabric.js 渐变
- IDC（亿信华辰位居中国数据治理解决方案市场份额第一）
- 删除元素（带过渡动画）
- JAVA JDK9新特性 List接口,Set接口,Map接口:静态的方法of,可以给集合一次性添加多个元素
- Fabric.js|Fabric.js 自由绘制圆形
- Fabric.js|Fabric.js 自由绘制椭圆
- Fabric.js|Fabric.js 缩放画布
- Fabric.js|Fabric.js 橡皮擦的用法（包含恢复功能）
- Fabric.js|Fabric.js 元素被选中时保持原有层级
- Fabric.js|Fabric.js 手动加粗文本iText