当前位置：网站首页>Fabric. JS background is not affected by viewport transformation

Fabric. JS background is not affected by viewport transformation

2022-07-02 05:18:00 【Director of Moral Education Department】

Brief introduction

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

If your project has canvas drag 、 Zoom and other functions , And you don't want the background image to be dragged or zoomed , Then read on .

This article mainly explains how to lock the background image , To lock the background image, you only need to set 1 Only attributes .

This article will add a wheel to zoom the canvas 、 Drag and drop the canvas and other functions to test “ Lock background image ” The effect of .

file

It should be clear that , No matter how you drag and zoom the canvas , The background is still .

Hands on coding

start

<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', {    backgroundVpt: false //  Not affected by viewport transformations （ That is, whether you drag or zoom the canvas , The background image is not affected ）  })</script>

**backgroundVpt Set to false This is the key .** Set this , The background image will no longer move , Not affected by viewport changes .

Add background 、 Rectangles and circles

For the convenience of demonstration , I want to set up a background image and two graphic elements , Only graphic elements are modified when zooming , The background image is motionless .

//  Omitted code fabric.Image.fromURL('../../images/bg.jpg', img => {  canvas.setBackgroundImage(img)  canvas.renderAll()})//  circular circle = new fabric.Circle({  name: 'circle',  top: 60,  left: 60,  radius: 30, //  The radius of the circle  30  fill: 'yellowgreen'})//  rectangular rect = new fabric.Rect({  name: 'rect',  top: 30, //  From the top of the container  60px  left: 100, //  To the left of the container  200px  fill: 'orange', //  fill a  Orange   width: 60, //  Width  60px  height: 60 //  Height  60px})//  Add rectangle to canvas canvas.add(circle, rect)

Execute after setting the background image canvas.renderAll() It will be re rendered , Otherwise, the picture looks useless .

Add wheel zoom

Use the scroll wheel to zoom the canvas , Need to monitor mouse:wheel .

//  Omitted code 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  )  opt.e.preventDefault()  opt.e.stopPropagation()})

Add drag and drop canvas event

Finally, add the drag and drop canvas event . Drag and drop includes mouse clicking , Mouse movement , Release the mouse 3 Events ：

Click the mouse ：mouse:down
Mouse movement ：mouse:move
Loosen the mouse ：mouse:up

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