FabricJS 在 mouse:up 和 :down 期间对 canvas 上的选定对象进行动画处理

Question

我正在尝试使用 FabricJS 为选中的任何对象设置动画。

因此，当从 mouse:down 中心选择对象 'shrinks'（宽度偏离 10px，高度偏离 10px）

并在 mouse:up 上 returns 到原始大小和状态。

我不知道是否需要为此使用 FabricJS 内置动画。不过我想让它线性增长和收缩。

现在我的 Fiddle 几乎什么都不做，我无法做到完全没有错误。

有人有这方面或类似的例子吗？我找不到任何关于在 mouse:up/:down 上更改 FabricJS 对象外观的信息。

(function() {
  var canvas = this.__canvas = new fabric.Canvas('canvas');
  var touchedObject;

  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    width: 50,
    height: 50,
    fill: 'blue',
    hasBorders: false,
  });
  canvas.add(rect);

  var rect2 = new fabric.Rect({
    left: 190,
    top: 50,
    width: 50,
    height: 50,
    fill: 'red',
    hasBorders: false,
  });
  canvas.add(rect2);

  canvas.on('object:selected', function(evn) {
    /*animate({
      'width': ,
      'height':
    }, {
      duration: 200,
    });*/
  });

  canvas.renderAll();
})();

Answer 1

您可以使用 fabric.util.animate() 方法完成此操作。

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
    var touchedObject;
    var rect = new fabric.Rect({
        left: 50,
        top: 50,
        width: 50,
        height: 50,
        fill: '#07C',
        hasBorders: false,
    });
    canvas.add(rect);
  
    // disable controls and set hover-cursor
    canvas.forEachObject(function(o) {
        o.hasBorders = o.hasControls = false;
    });
    canvas.hoverCursor = 'pointer';
  
    // mouse events
    canvas.on('mouse:down', function(e) {
        animate(e, 1);
    });
    canvas.on('mouse:up', function(e) {
        animate(e, 0);
    });

    function animate(e, p) {
        if (e.target) {
            fabric.util.animate({
                startValue: e.target.get('height'),
                endValue: e.target.get('height') + (p ? -10 : 50 - e.target.height),
                duration: 200,
                onChange: function(v) {
                    e.target.setHeight(v);
                    canvas.renderAll();
                },
                onComplete: function() {
                    e.target.setCoords();
                }
            });
            fabric.util.animate({
                startValue: e.target.get('width'),
                endValue: e.target.get('width') + (p ? -10 : 50 - e.target.width),
                duration: 200,
                onChange: function(v) {
                    e.target.setWidth(v);
                    canvas.renderAll();
                },
                onComplete: function() {
                    e.target.setCoords();
                }
            });
            fabric.util.animate({
                startValue: e.target.get('top'),
                endValue: e.target.get('top') + (p && 5),
                duration: 200,
                onChange: function(v) {
                    e.target.setTop(v);
                    canvas.renderAll();
                },
                onComplete: function() {
                    e.target.setCoords();
                }
            });
            fabric.util.animate({
                startValue: e.target.get('left'),
                endValue: e.target.get('left') + (p && 5),
                duration: 200,
                onChange: function(v) {
                    e.target.setLeft(v);
                    canvas.renderAll();
                },
                onComplete: function() {
                    e.target.setCoords();
                }
            });
        }
    }
    canvas.renderAll();
})();

#canvas {
  border: 1px solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="150"></canvas>

FabricJS 在 mouse:up 和 :down 期间对 canvas 上的选定对象进行动画处理

FabricJS animating :selected object on canvas during mouse:up and :down

javascript

jquery

animation

canvas

fabricjs