当前位置：网站首页>Fabric. JS zoom canvas

Fabric. JS zoom canvas

2022-07-02 14:27:00 【Director of Moral Education Department】

Brief introduction

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

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 .

file

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

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 .

file

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

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

Zoom canvas （ Take the mouse pointer as the origin ）

file

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

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 .