master

Branches (1)

Manage

Manage

master

fabricjs-demo
/
tutorial
/
Canvas
/
remove.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>删除元素</title>
  <style>
    .btn-x {
      margin-bottom: 10px;
    }
    #canvasBox {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="btn-x">
    <button onclick="delCircle()">删除元素（圆型）</button>
    <button onclick="delRect()">带动画删除元素（方形）</button>
  </div>
  <canvas id="canvasBox" width="600" height="600"></canvas>

<script src="../../script/fabric.js"></script>
<script>
  let canvas = null
  let circle = null
  let rect = null

  // 使用 元素id 创建画布，此时可以在画布上框选
  canvas = new fabric.Canvas('canvasBox', {
    width: 400,
    height: 400
  })

  // 圆形
  circle = new fabric.Circle({
    name: 'circle',
    top: 60,
    left: 60,
    radius: 30, // 圆的半径 30
    fill: 'yellowgreen'
  })

  // 矩形
  rect = new fabric.Rect({
    name: 'rect',
    top: 60, // 距离容器顶部 60px
    left: 200, // 距离容器左侧 200px
    fill: 'orange', // 填充a 橙色
    width: 60, // 宽度 60px
    height: 60 // 高度 60px
  })

  // 将矩形添加到画布中
  canvas.add(circle, rect)

  // 删除圆形（没动画）
  function delCircle() {
    canvas.remove(circle)
  }

  // 删除矩形（有动画）
  function delRect() {
    canvas.FX_DURATION = 1500 // 设置动画时长，默认500毫秒

    canvas.fxRemove(rect, {
      onChange() {
        console.log('在动画的每一步调用')
      },
      onComplete() {
        console.log('删除成功后调用')
      }
    })
  }

</script>
</body>
</html>