当前位置：网站首页>Fabric. JS centered element

Fabric. JS centered element

2022-07-25 00:58:00 【51CTO】

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 ：

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

Fabric.js Center elements _SVG

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














































































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

Fabric.js Center elements _SVG_02

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















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

Fabric.js Center elements _React_03

Moving the canvas

Fabric.js Center elements _React_04

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

Fabric.js Center elements _Canvas_05

Zoom

Fabric.js Center elements _React_06

Moving the canvas

Fabric.js Center elements _Canvas_07

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

With animation effect

Fabric.js Center elements _JS_08

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

Fabric.js Center elements _Vue_09

//  Omitted code 

canvas.viewportCenterObjectV(rect)

//  The element itself is centered according to the window 
// rect.viewportCenterV()
     1.
2.
3.
4.
5.
6.

Canvas based

//  Omitted code 

canvas.centerObjectH(rect)

//  The element itself is centered according to the canvas 
// rect.centerH()
     1.
2.
3.
4.
5.
6.

With animation

Fabric.js Center elements _Canvas_10

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

Fabric.js Center elements _Canvas_11

//  Omitted code 

canvas.viewportCenterObject(rect)

//  The element itself is centered according to the window 
// rect.viewportCenter()
     1.
2.
3.
4.
5.
6.

Canvas based

Fabric.js Center elements _React_12

//  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

Fabric.js Center elements _React_13