CODEWITHSUNDEEP
canvasfabricjs
Vitozz_RDX
Vitozz_RDX

Reputation: 166

Why second selection doesn't work in Fabric.js

When i click on image for the first time - it moves to the left

var canvas = new fabric.Canvas('canvas');
  canvas.on({
    'object:selected': function(e) {
      e.target.animate('left', 50, {                    
        onChange: canvas.renderAll.bind(canvas),
        duration: 100
      });
    }
  });

fabric.Image.fromURL('imag/pziiif.gif', function(img) {
  img.set({
    left:0,
    top: 0
  });
  canvas.add(img);
});

But i need that my image repeat its movement , when i click on it for the second time . I don't understand why it's not happening . Maybe it's because selection still on my image . Should i somehow remove selection ? If so then how ?

Upvotes: 1

Views: 396

Answers (1)

Durga
Durga

Reputation: 15604

You need to deselect object using discardActiveObject() and to add value every time on click use +=50

DEMO 

var canvas = new fabric.Canvas('canvas');
canvas.on('object:selected', function(e) {
  e.target.animate('left', '+=50', {
    onChange: canvas.requestRenderAll.bind(canvas),
    duration: 500,
    onComplete:function(){
     e.target.set('active',false)
     e.target.setCoords();
     canvas.discardActiveObject().requestRenderAll();
    }
  });
});

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
  img.set({
    left: 0,
    top: 0,
    scaleX: 0.3,
    scaleY: 0.3
  });
  canvas.add(img);
});
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>

Upvotes: 1

Related Questions