FabricJS动画：在鼠标上的画布上选定的对象：up：down

Question

我试图使用FabricJS为它选择时的任何对象设置动画。

选择的对象“收缩”因此，当从中央对小鼠：向下（10px的关闭宽度和10px的关闭高度）

而且对小鼠：最多它返回到原来的大小和状态。

我不知道我是否需要使用为此构建的动画制作的FabricJS。我希望它增长和缩小线性虽然。

现在我的Fiddle几乎没有任何东西，我不能没有错误得到足够多。

有没有人有这样或类似的任何例子？我找不到任何有关在鼠标上更改FabricJS对象外观的信息：选中时为up /：down。

(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); 
 
\t \t 
 
    // disable controls and set hover-cursor 
 
    canvas.forEachObject(function(o) { 
 
     o.hasBorders = o.hasControls = false; 
 
    }); 
 
    canvas.hoverCursor = 'pointer'; 
 
\t \t 
 
    // 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>