In this article

Fabric.js provides two methods for deleting objects.

One is to delete the element directly, and the other is to remove the element with a transition animation (fade animation).

This article will focus on the method of removing elements with transition animation, and will also talk about setting the transition time, the callback function after deletion and other knowledge points.





The relevant API

There are two ways to delete elements:

  • canvas.remove(... object)
  • canvas.fxRemove(object, callbacksopt)

Set animation duration:

  • canvas.FX_DURATION


canvas.remove

I’m going to remove it. Pass in the element object.

canvas.remove(object)
Copy the code

When canvas.renderOnAddRemove is true, the canvas is automatically refreshed when an element is removed using Canvas. remove.

Canvas. RenderOnAddRemove Defaults to true


If Canvas. renderOnAddRemove = false, the element is removed with Canvas. remove, but the element is still visible on the canvas.

You need to manually execute canvas.renderall () or some other refresh method to remove the element from the canvas (visually).


canvas.fxRemove

FxRemove is a transition animated deletion method that fades objects removed until they disappear.

The first argument to this method is the object to delete;

The second argument is the callback object, which has two values and is a type function.

OnChange and onComplete.

  • OnChange: called at each step of the animation

  • OnComplete: called after successful deletion


canvas.fxRemove(object, {
  onChange() {
	console.log('Called every frame of the animation')},onComplete() {
	console.log('Called after successful deletion')}})Copy the code


canvas.FX_DURATION

Canvas.FX_DURATION Sets the duration of the transition animation.

The default value is 500 milliseconds

canvas.FX_DURATION = 1500
Copy the code


After modifying canvas.FX_DURATION, try Canvas. fxRemove. The transition time for removing elements is the length you set.





The sample code

<div class="btn-x">
  <button onclick="delCircle()">Delete elements (circle)</button>
  <button onclick="delRect()">Draw to remove elements (squares)</button>
</div>
<canvas id="canvasBox" width="600" height="600"></canvas>
  
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
  let canvas = null
  let circle = null
  let rect = null

  window.onload = function() {
    // Create a canvas with the element ID, which you can box on the canvas
    canvas = new fabric.Canvas('canvasBox', {
      width: 400.height: 400
    })

    / / round
    circle = new fabric.Circle({
      name: 'circle'.top: 60.left: 60.radius: 30.The radius of the circle is 30
      fill: 'yellowgreen'
    })

    / / rectangle
    rect = new fabric.Rect({
      name: 'rect'.top: 60.// 60px from the top of the container
      left: 200.// Keep 200px to the left of the container
      fill: 'orange'.// Fill a orange
      width: 60./ / width 60 px
      height: 60 / / height 60 px
    })
    
    // Add the rectangle to the canvas
    canvas.add(circle, rect)
  }

  // Remove circles (no animation)
  function delCircle() {
    canvas.remove(circle)
  }

  // Delete rectangle (animated)
  function delRect() {
    canvas.FX_DURATION = 1500 // Set the animation duration to 500 milliseconds by default

    canvas.fxRemove(rect, {
      onChange() {
        console.log('Called at every step of the animation')},onComplete() {
        console.log('Called after successful deletion')}}}</script>
Copy the code





Code warehouse

  • Removing elements native (with transition animation)
  • Removing elements using Fabric in Vue3 (with transition animation)





Recommended reading

⭐ Fabric.js Upload local image to canvas Background

⭐ Fabric.js from Getting Started to Expanding

Fabric.js Gradients (including Radial gradients)

Fabric.js 3 apis to set canvas width and Height

⭐ Fabric.js Custom Right-click Menu

3 ways to change an image in fabric.js (including changing an image in a group, and if there is a cache)


If the content of this article is helpful to you, please also help me click a like bai 👍