本文简介
点赞 + 关注 + 评论 = 学会了
在使用 Fabric.js 开发时，可能会需要将元素居中。
本文总结了 Fabric.js 常用的将元素居中的方法，其中包括：
除此之外，还总结了 在画布层面居中指定元素 和 元素自身调用居中方法 。
阅读本文需要你有一定的 Fabric.js 基础，如果还不太了解 Fabric.js 是什么，可以阅读 《Fabric.js 从入门到膨胀》
创建基础项目
为了方便演示，我在初始化画布的时：
添加一个背景图，该背景图的尺寸和初始化的画布一样大。
添加一个矩形，之后要居中的对象就是它了。
添加鼠标滚轮滚动时缩放画布（方便演示 基于视窗 和 基于画布 的区别）。
添加鼠标拖拽画布平移位置（方便演示 基于视窗 和 基于画布 的区别）。
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 Fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script> // 初始化画布 const canvas = new fabric.Canvas('canvasBox')
// 设置背景图 fabric.Image.fromURL('../../images/bg2.jpg', img => { canvas.setBackgroundImage( img, canvas.renderAll.bind(canvas), { // 将背景图的宽高设置成画布的宽高 scaleX: canvas.width / img.width, scaleY: canvas.height / img.height } ) })
// 创建矩形 const rect = new fabric.Rect({ name: 'rect', top: 60, // 距离容器顶部 60px left: 60, // 距离容器左侧 200px fill: 'orange', // 填充a 橙色 width: 60, // 宽度 60px height: 60, // 高度 60px originX: 'center', originY: 'center' })
// 将矩形添加到画布中 canvas.add(rect)
// 滚轮滚动时可修改画布缩放等级 canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100 let zoom = canvas.getZoom() // 获取画布当前缩放值 zoom *= 0.999 ** delta if (zoom > 20) zoom = 20 if (zoom < 0.01) zoom = 0.01 canvas.zoomToPoint( { // 关键点 x: opt.e.offsetX, y: opt.e.offsetY }, zoom ) })
/* 拖拽画布 */ canvas.on('mouse:down', opt => { // 鼠标按下时触发 let evt = opt.e canvas.isDragging = true // isDragging 是自定义的 canvas.lastPosX = evt.clientX // lastPosX 是自定义的 canvas.lastPosY = evt.clientY // lastPosY 是自定义的 })
canvas.on('mouse:move', opt => { // 鼠标移动时触发 if (canvas.isDragging) { let evt = opt.e let vpt = canvas.viewportTransform // 聚焦视图的转换 vpt[4] += evt.clientX - canvas.lastPosX vpt[5] += evt.clientY - canvas.lastPosY canvas.requestRenderAll() canvas.lastPosX = evt.clientX canvas.lastPosY = evt.clientY } })
canvas.on('mouse:up', opt => { // 鼠标松开时触发 canvas.setViewportTransform(canvas.viewportTransform) // 设置此画布实例的视口转换 canvas.isDragging = false })</script>
复制代码
代码有点多，但 滚轮滚动时可修改画布缩放等级 和 拖拽画布 部分其实可以不要的，写上这些代码主要是为了方便演示。
以下所有例子中所指的元素都是 rect ，因为本例以 rect 进行讲解。你需要根据实际项目中要操作的对象进行调整。
水平居中
将指定元素水平居中。
基于视窗
<button onclick="centerH()">水平居中</button>
<script> // 省略部分代码
// 水平居中 function centerH() { // 从画布的角度操作对象 canvas.viewportCenterObjectH(rect)
// 元素自己根据视窗进行居中 // rect.viewportCenterH() }</script>
复制代码
上面我写了 2 中方法，方法 1 是用画布操作指定的对象；方法 2 是元素自己根据视窗来调整自己的位置。
我直接上图来解释一下什么是 根据视窗水平居中元素
缩放的情况
<br>
移动画布的情况
在缩放和移动画布之后，canvas.viewportCenterObjectH 和 rect.viewportCenterH 还是会根据根据视窗的标准来水平居中。
基于画布
// 省略部分代码canvas.centerObjectH(rect)
// 元素自己根据画布进行居中// rect.centerH()
复制代码
缩放的情况
移动画布的情况
可以和 基于视窗 的效果对比一下。
带动画效
// 省略部分代码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 居中元素](
评论