当前位置：网站首页>Delete element (with transition animation)

Delete element (with transition animation)

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

Brief introduction

Fabric.js Provides 2 Methods to delete objects .

One is Delete directly , Another way is With transition animation Remove elements （ Fade out animation ）.

This article focuses on With transition animation How to delete elements , I'll also talk about settings The transition time is long 、 Delete the Callback function Wait for knowledge .

file

relevant API

Delete the element's 2 Methods ：

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

Animation duration ：

canvas.FX_DURATION

canvas.remove

remove Well understood. , It means delete . Just pass in the element object .

canvas.remove(object)

stay canvas.renderOnAddRemove by true Under the circumstances , Use canvas.remove After deleting the element , The canvas will refresh automatically .

canvas.renderOnAddRemove The default value is true

If canvas.renderOnAddRemove = false , Use canvas.remove after , The element is deleted , But you can still see elements on the canvas .

Manual execution is required at this time canvas.renderAll() Or other refresh methods , The element that has just been deleted will be removed from the canvas ( Visually ) disappear .

canvas.fxRemove

fxRemove Is a deletion method with transition animation , Objects deleted using this method fade out , Until it disappears .

This method The first parameter Is the object to delete ;

The second parameter Is a callback object , This object has 2 It's worth , Is a type function .

Namely onChange and onComplete .

onChange ： Called at every step of the animation
onComplete： After successful deletion, base note is called.

canvas.fxRemove(object, {  onChange() {	console.log(' Called at every frame of the animation ')  },  onComplete() {	console.log(' After successful deletion, base note is called. ')  }})

canvas.FX_DURATION

canvas.FX_DURATION You can set the duration of the transition animation .

The default value is 500, The unit is millisecond

canvas.FX_DURATION = 1500

After modification canvas.FX_DURATION after , Try again. canvas.fxRemove , The transition duration of deleting elements is the duration you set .

Sample code

<div class="btn-x">  <button onclick="delCircle()"> Remove elements （ Circular ）</button>  <button onclick="delRect()"> Delete element with animation （ square ）</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() {    //  Use   Elements id  Create a canvas , At this point, you can box select... On the canvas     canvas = new fabric.Canvas('canvasBox', {      width: 400,      height: 400    })    //  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: 60, //  From the top of the container  60px      left: 200, //  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)  }  //  Delete circle （ No animation ）  function delCircle() {    canvas.remove(circle)  }  //  Delete rectangle （ There's animation ）  function delRect() {    canvas.FX_DURATION = 1500 //  Animation duration , Default 500 millisecond     canvas.fxRemove(rect, {      onChange() {        console.log(' Called at every step of the animation ')      },      onComplete() {        console.log(' After successful deletion, base note is called. ')      }    })  }</script>