mouseup/touch 关闭动画（淡出）形状

Question

我一直在努力学习 fabric.js 并且很难弄清楚如何 target/select 我刚刚添加到 mouse:down 的形状，这样我就可以在 mouse:up.

上淡出

到目前为止我有什么：jsfiddle

var fingerCanvas = new fabric.Canvas('c');
var fingerMark = new fabric.Ellipse({
  left: -100,
  top: -100,
  fill: '#ff0000',
  originX: 'center',
  originY: 'center',
  rx: 35,
  ry: 50
});

//fingerCanvas.add(fingerMark);

fingerCanvas.on('mouse:move', function(obj) {
  fingerMark.top = obj.e.y;
  fingerMark.left = obj.e.x;
  //fingerCanvas.renderAll();
});

fingerCanvas.on('mouse:down', function(obj) {
  fingerCanvas.add(fingerMark.clone());
  //fingerCanvas.renderAll();
});

fingerCanvas.on('mouse:up', function(obj) {
  //fade out the ellipse added by mouse:down event
});

canvas {
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

任何熟悉 fabricjs 并能指出正确方向的人？谢谢

Answer 1

在 animate 方法中，给 opacity 属性设置动画并将值设置为 0。

添加了 abort 方法来停止动画，如果用户在 1 秒之间再次点击。

演示版

var fingerCanvas = new fabric.Canvas('c', {
  selection: false
});
var fingerMark = new fabric.Ellipse({
  left: 0,
  top: 0,
  fill: '#ff0000',
  originX: 'center',
  originY: 'center',
  rx: 35,
  ry: 50,
  evented: false,
  opacity: 0
});
var isMouseDown = false;

fingerCanvas.add(fingerMark);

fingerCanvas.on('mouse:move', function(options) {
  if (isMouseDown) {
    var pointer = fingerCanvas.getPointer(options.e);
    fingerMark.set({
      left: pointer.x,
      top: pointer.y
    })
    fingerCanvas.requestRenderAll();
  }
});

fingerCanvas.on('mouse:down', function(options) {
  isMouseDown = true;
  var pointer = fingerCanvas.getPointer(options.e);
  fingerMark.set({
    opacity: 1,
    left: pointer.x,
    top: pointer.y
  });
});

fingerCanvas.on('mouse:up', function(obj) {
  isMouseDown = false;
  fingerMark.animate('opacity', 0, {
    duration: 1000,
    abort: function() {
      return isMouseDown;
    },
    onChange: fingerCanvas.requestRenderAll.bind(fingerCanvas),
    onComplete: function() {
      fingerMark.set({
        opacity: isMouseDown ? 1 : 0
      });
      fingerCanvas.requestRenderAll();
    }
  })
});

canvas {
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

mouseup/touch 关闭动画（淡出）形状

Animate (fade) out shape on mouseup/touch off

fabricjs