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>
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
      
10.
      
11.
      
12.
      
13.
      
14.
      
15.
      
16.
      
17.
      
18.
      
19.
      
20.
      
21.
      
22.
      
23.
      
24.
      
25.
      
26.
      
27.
      
28.
      
29.
      
30.
      
31.
      
32.
      
33.
      
34.
      
35.
      
36.
      
37.
      
38.
      
39.
      
40.
      
41.
      
42.
      
43.
      
44.
      
45.
      
46.
      
47.
      
48.
      
49.
      
50.
      
51.
      
52.
      
53.
      
54.
      
55.
      
56.
      
57.
      
58.
      
59.
      
60.
      
61.
      
62.
      
63.
      
64.
      
65.
      
66.
      
67.
      
68.
      
69.
      
70.
      
71.
      
72.
      
73.
      
74.
      
75.
      
76.
      
77.
     

<button onclick="centerH()">水平居中</button>

<script> // 省略部分代码 // 水平居中 function centerH() { // 从画布的角度操作对象 canvas.viewportCenterObjectH(rect) // 元素自己根据视窗进行居中 // rect.viewportCenterH() } </script>
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
      
10.
      
11.
      
12.
      
13.
      
14.
     

// 省略部分代码
canvas.centerObjectH(rect)

// 元素自己根据画布进行居中
// rect.centerH()
     

      
1.
      
2.
      
3.
      
4.
      
5.
     

// 省略部分代码
canvas.fxCenterObjectH(rect)
     

      
1.
      
2.
     

// 省略部分代码

canvas.viewportCenterObjectV(rect)

// 元素自己根据视窗进行居中
// rect.viewportCenterV()
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
     

// 省略部分代码

canvas.centerObjectH(rect)

// 元素自己根据画布进行居中
// rect.centerH()
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
     

// 省略部分代码

canvas.fxCenterObjectV(rect)
     

      
1.
      
2.
      
3.
     

// 省略部分代码

canvas.viewportCenterObject(rect)

// 元素自己根据视窗进行居中
// rect.viewportCenter()
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
     

// 省略部分代码

canvas.centerObject(rect)

// 元素自己根据画布进行居中
rect.center()
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
     

// 省略部分代码

function fxCenter() {
  canvas.fxCenterObjectH(rect)
  canvas.fxCenterObjectV(rect)
}
     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.