FabricJS动画：鼠标：向上和：向下期间画布上的选定对象

Posted 2023-03-25

【中文标题】FabricJS动画：鼠标：向上和：向下期间画布上的选定对象

【英文标题】：FabricJS animating :selected object on canvas during mouse:up and :down

【发布时间】：2017-09-14 05:39:34

【问题描述】：

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

So when selected an object 'shrinks' from center on mouse:down (10px off the width and 10px off the height)

在 mouse:up 上它会恢复到原来的大小和状态。

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

现在我的Fiddle 几乎什么也没做，如果没有错误，我就不能走得足够远。

有没有人有这个或类似的例子？我找不到任何关于在鼠标上更改 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();
)();

【参考方案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" ></canvas>

【讨论】：

太棒了，我离这个解决方案还很远。是否可以做一个小的改变，让它不会回到画布上的原始位置？我试过了，但我一直在打破它：\

@GoldenGonaz 只需删除 mouse:up 事件。简单:)

这就是我尝试过的，但它也阻止了矩形恢复到原来的大小。我只是想阻止它回到画布上的原始位置

@GoldenGonaz 嗯。但这会将矩形的位置更改为差异。一，如果那是你想要的，那很好。检查编辑的答案。

啊，是的，不过这样更好:) 谢谢。我会尝试解决它，这样当你点击它时矩形不会移动（不拖动它）