Fabric. JS centered element

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 ）.

<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>
 Copy code 

Copy

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

<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>
 Copy code 

Copy

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

//  Omitted code 
canvas.centerObjectH(rect)

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

Copy

Zoom

Moving the canvas

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

With animation effect

//  Omitted code 
canvas.fxCenterObjectH(rect)
 Copy code 

Copy

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

//  Omitted code 

canvas.viewportCenterObjectV(rect)

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

Copy

Canvas based

//  Omitted code 

canvas.centerObjectH(rect)

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

Copy

With animation

//  Omitted code 

canvas.fxCenterObjectV(rect)
 Copy code 

Copy

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

//  Omitted code 

canvas.viewportCenterObject(rect)

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

Copy

Canvas based

//  Omitted code 

canvas.centerObject(rect)

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

Copy

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

//  Omitted code 

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

Copy

Code warehouse

Fabric Center elements