Fabric. JS lock the background image, not affected by zooming and dragging

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 .

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

Copy

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

Copy

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()
})
 Copy code 

Copy

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

Copy

summary

The functions explained in this article are not difficult , Just say when initializing the canvas backgroundVpt Set to false that will do .

The application scenario I can think of for the time being is the background of repeated patterns , Secure it .

《backgroundVpt file 》

Source warehouse

The background is unaffected by viewport transformations