Animieren Höhe von Fabricjs Rect Objekt von oben statt unten

Ich habe einen MCVE verspottet, der das Problem zeigt. Wenn Sie auf das rote Quadrat klicken, wird es allmählich kleiner (über ungefähr 10 Sekunden) zu nichts und wird dann entfernt.Animieren Höhe von Fabricjs Rect Objekt von oben statt unten

Die Animation ist jedoch von unten nach oben und nicht von oben nach unten.

Gibt es eine Möglichkeit, dies mit der Standardmethode fabricjs .animate zu tun?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script> 
 
<script> 
 
    $(function() { 
 
     canvas = new fabric.Canvas('test'); 
 

 
     canvas.observe('mouse:down', function(e) { 
 
      e.target.animate('height', 0, { 
 
       onChange: canvas.renderAll.bind(canvas), 
 
       duration: 10000, 
 
       onComplete: function() { 
 
        e.target.remove();      
 
        canvas.renderAll(); 
 
       } 
 
      }); 
 
     }); 
 

 
     var rect = new fabric.Rect({ 
 
      top : 100, 
 
      left : 100, 
 
      width : 200, 
 
      height : 200, 
 
      fill : 'red', 
 
      lockUniScaling: true, 
 
      lockRotation: true, 
 
      hasControls: false 
 
     }); 
 

 
     canvas.add(rect); 
 
     canvas.renderAll(); 
 
    }); 
 

 
</script> 
 
<title>Test Test</title> 
 
</head> 
 
<body> 
 
<canvas id="test" height="1000" width="1000"></canvas> 
 
</body> 
 
</html>

Quelle

2016-07-11 Anonymous

Versuchen Sie es:

canvas.observe('mouse:down', function (e) { 
    if (!e.target) 
     return; 
    e.target.animate('height', 0, { 
     onChange : canvas.renderAll.bind(canvas), 
     duration : 10000, 
     onComplete : function() { 
      e.target.remove(); 
      canvas.renderAll(); 
     } 
    }); 
    //It is suitable if you know initial height... 
    e.target.animate('top', 300, {// initialHeight(100) + initialTop(200) 
     duration : 10000, 
     onChange : canvas.renderAll.bind(canvas), 
    }); 
});

example

example 2

Diese Methode ist nicht optimal, aber es funktioniert! Notwendigkeit, benutzerdefinierte animieren, die sich ändern wird Höhe und oben.

Quelle

2016-07-11 14:39:39

Animieren Höhe von Fabricjs Rect Objekt von oben statt unten

Antwort

Verwandte Themen