Fabric. JS zoom canvas

Use canvas Projects developed , The need for scrolling the canvas should not be a minority , Like maps .

Fabric.js It also provides the function of scaling the canvas , This article mainly explains several methods for setting the canvas size .

Do it

Check the documentation before you start .

I put the documents related to this article here

• mouse:wheel： Wheel event
• getZoom： Get the current zoom level of the canvas
• setZoom： Set canvas zoom level
• zoomToPoint： Set the canvas zoom scale and zoom origin

among setZoom and zoomToPoint The application scenarios are different .

start

Before using zoom , First initialize the canvas .

I will also set a background image on the canvas , Convenient for observation .

<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 
  canvas = new fabric.Canvas('canvasBox')

  //  Add background 
  //  The first 1 Parameters ： Picture path 
  //  The first 2 Parameters ： Callback function , Returning to the function will return the image object 
  fabric.Image.fromURL('../../images/bg.jpg', img => {
    canvas.setBackgroundImage(img)
    canvas.renderAll()
  })
</script>
 Copy code 

Copy

Zoom canvas （ Take the upper left corner as the origin ）

Zoom the canvas with the upper left corner as the origin , Recommended getZoom and setZoom Combine .

getZoom You can get the current zoom level of the canvas , use setZoom Set a new zoom level .

So I added... On the page 2 Button , A zoom in , A zoom out .

<div>
  <button onclick="setzoom(1)"> Zoom in </button>
  <button onclick="setzoom(-1)"> narrow </button>
</div>
<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>
  const canvas = new fabric.Canvas('canvasBox')

  fabric.Image.fromURL('../../images/bg.jpg', img => {
    canvas.setBackgroundImage(img)
    canvas.renderAll()
  })

  //  Set canvas zoom level 
  function setzoom(val) {
    let zoom = canvas.getZoom() //  Get the current zoom level of the canvas 
    zoom += val 
    canvas.setZoom(zoom) //  Set canvas zoom level 
  }
</script>
 Copy code 

Copy

Zoom level when zooming in Add 1, Zoom level when zooming out reduce 1.

Zoom canvas （ Take the mouse pointer as the origin ）

<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>
  const canvas = new fabric.Canvas('canvasBox')

  fabric.Image.fromURL('../../images/bg.jpg', img => {
    canvas.setBackgroundImage(img)
    canvas.renderAll()
  })

  //  Listen for mouse wheel zoom Events 
  canvas.on('mouse:wheel', opt => {
    const delta = opt.e.deltaY //  Roller , Rolling up is  -100, Rolling down is  100
    let zoom = this.canvas.getZoom() //  Gets the current zoom value of the canvas 
    zoom *= 0.999 ** delta
    if (zoom > 20) zoom = 20 //  Limit the maximum zoom level 
    if (zoom < 0.01) zoom = 0.01 //  Limit the minimum zoom level 

    //  Zoom with the mouse position as the origin 
    this.canvas.zoomToPoint(
      { //  Key points 
        x: opt.e.offsetX,
        y: opt.e.offsetY
      },
      zoom //  Pass in the modified zoom level 
    )
  })
</script>
 Copy code 

Copy

Use mouse:wheel Monitor mouse wheel scrolling , If you scroll up ,deltaY The value of is 100, Down there is -100, So you can set a formula to control the zoom level when scrolling .

zoomToPoint It can be understood as setZoom Enhanced Edition , The first parameter is the origin coordinates , This example passes in the current coordinates of the mouse ; The second parameter is the zoom level .

Code warehouse

Fabric Scroll wheel zooms canvas