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>