共计 3176 个字符，预计需要花费 8 分钟才能阅读完成。
本文简介
点赞 + 关注 + 评论 = 学会了
在应用 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 是元素本人依据视窗来调整本人的地位。
我间接上图来解释一下什么是 依据视窗程度居中元素
缩放的状况
挪动画布的状况
在缩放和挪动画布之后，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 居中元素
举荐浏览
👍《Fabric.js 上标和下标的应用偏方》
👍《Fabric.js 缩放画布》
👍《Fabric.js 笔刷到底怎么用？》
点赞 + 关注 + 珍藏 = 学会了
