Fabric. JS centered element

Brief introduction

give the thumbs-up + Focus on + Comment on = Learned to

In the use of Fabric.js When developing , You may need to center the element .

This article summarizes Fabric.js Common methods of centering elements , These include ：

• Window based horizontal centering
• Canvas based horizontal centering
• Horizontal center with animation
• Window based vertical centering
• Canvas based vertical centering
• Vertical center with animation
• Horizontal and vertical centering at the same time （ It is also based on windows or canvas ）

besides , It also sums up Center the specified element at the canvas level and The element itself calls the centered method .

Reading this article requires you to have some Fabric.js Basics , If you don't understand Fabric.js What is it? , You can read  《Fabric.js From entry to expansion 》

Create basic projects

For the convenience of demonstration , When I initialize the canvas ：

1. Add a background image , The size of the background image is as large as the initialized canvas .
2. Add a rectangle , Then the object to be centered is it .
3. Add mouse wheel to zoom canvas while scrolling （ Easy to demonstrate Based on windows and Canvas based The difference between ）.
4. Add mouse drag canvas translation position （ Easy to demonstrate Based on windows and Canvas based The difference between ）.

Log in and copy

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!--  introduce  Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script> //  Initialize canvas  const canvas = new fabric.Canvas('canvasBox') //  Setting the background  fabric.Image.fromURL('../../images/bg2.jpg', img => { canvas.setBackgroundImage( img, canvas.renderAll.bind(canvas), { //  Set the width and height of the background image to the width and height of the canvas  scaleX: canvas.width / img.width, scaleY: canvas.height / img.height } ) }) //  Create a rectangle  const rect = new fabric.Rect({ name: 'rect', top: 60, //  From the top of the container  60px left: 60, //  To the left of the container  200px fill: 'orange', //  fill a  Orange  width: 60, //  Width  60px height: 60, //  Height  60px originX: 'center', originY: 'center' }) //  Add rectangle to canvas  canvas.add(rect) //  The zoom level of the canvas can be modified when the scroll wheel is scrolling  canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY //  Roller , Rolling up is  -100, Rolling down is  100 let zoom = canvas.getZoom() //  Gets the current zoom value of the canvas  zoom *= 0.999 ** delta if (zoom > 20) zoom = 20 if (zoom < 0.01) zoom = 0.01 canvas.zoomToPoint( { //  Key points  x: opt.e.offsetX, y: opt.e.offsetY }, zoom ) }) /*  Drag the canvas  */ canvas.on('mouse:down', opt => { //  Trigger when the mouse is pressed  let evt = opt.e canvas.isDragging = true // isDragging  Is custom  canvas.lastPosX = evt.clientX // lastPosX  Is custom  canvas.lastPosY = evt.clientY // lastPosY  Is custom  }) canvas.on('mouse:move', opt => { //  Trigger when mouse moves  if (canvas.isDragging) { let evt = opt.e let vpt = canvas.viewportTransform //  Focus view conversion  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 => { //  Trigger when the mouse is released  canvas.setViewportTransform(canvas.viewportTransform) //  Set the viewport conversion for this canvas instance   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.
     

There's a bit more code , but The zoom level of the canvas can be modified when the scroll wheel is scrolling and Drag the canvas In fact, some of them are unnecessary , This code is mainly written for the convenience of demonstration .

All the elements referred to in the following examples are rect , Because this example takes rect Explain . You need to adjust according to the objects to be operated in the actual project .

Horizontal center

Center the specified element horizontally .

Based on windows

Log in and copy

<button onclick="centerH()"> Horizontal center </button>

<script> //  Omitted code  //  Horizontal center  function centerH() { //  Manipulate objects from the perspective of the canvas  canvas.viewportCenterObjectH(rect) //  The element itself is centered according to the window  // rect.viewportCenterH() } </script>
     

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

It says 2 Medium method , Method 1 Is to manipulate the specified object with the canvas ; Method 2 It is the element that adjusts its position according to the window .

Let me explain what is... Directly from the above figure Center the elements horizontally according to the window

Zoom

Moving the canvas

After zooming and moving the canvas ,canvas.viewportCenterObjectH and rect.viewportCenterH It will still be centered horizontally according to the standard of the window .

Canvas based

Log in and copy

//  Omitted code 
canvas.centerObjectH(rect)

//  The element itself is centered according to the canvas 
// rect.centerH()
     

      
1.
      
2.
      
3.
      
4.
      
5.
     

Zoom

Moving the canvas

You can talk to Based on windows Compare the effect of .

With animation effect

Log in and copy

//  Omitted code 
canvas.fxCenterObjectH(rect)
     

      
1.
      
2.
     

The effect with animation needs to be called in the canvas fxCenterObjectH Method . The center with animation effect is centered according to the canvas , Not windows ！

Vertical center

The usage of vertical center is similar to that of horizontal center , Just a change api. The horizontal center is “H” , For vertical centering “V”.

Based on windows

Log in and copy

//  Omitted code 

canvas.viewportCenterObjectV(rect)

//  The element itself is centered according to the window 
// rect.viewportCenterV()
     

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

Canvas based

Log in and copy

//  Omitted code 

canvas.centerObjectH(rect)

//  The element itself is centered according to the canvas 
// rect.centerH()
     

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

With animation

Log in and copy

//  Omitted code 

canvas.fxCenterObjectV(rect)
     

      
1.
      
2.
      
3.
     

level + vertical Center at the same time

Fabric.js It also provides the function of horizontal and vertical centering at the same time .

Based on windows

Log in and copy

//  Omitted code 

canvas.viewportCenterObject(rect)

//  The element itself is centered according to the window 
// rect.viewportCenter()
     

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

Canvas based

Log in and copy

//  Omitted code 

canvas.centerObject(rect)

//  The element itself is centered according to the canvas 
rect.center()
     

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

With animation

For the time being, we haven't found any animation effect in the vertical and horizontal center at the same time api, So you can try calling fxCenterObjectH and fxCenterObjectV

Log in and copy

//  Omitted code 

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

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

Code warehouse

 Fabric Center elements

Recommended reading

 《Fabric.js The use of superscripts and subscripts 》

 《Fabric.js Zoom canvas 》

 《Fabric.js How to use the brush ？》

give the thumbs-up + Focus on + Collection = Learned to