Почему второй выбор не работает в Fabric.js - PullRequest
Новая
       12

Почему второй выбор не работает в Fabric.js

0 голосов
/ 07 мая 2018

Когда я нажимаю на изображение в первый раз - оно перемещается влево 

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);
});

Но мне нужно, чтобы мое изображение повторяло свое движение, когда я нажимаю на него во второй раз. Я не понимаю, почему этого не происходит. Может быть, это потому, что выбор все еще на моем изображении. Должен ли я как-то удалить выделение? Если так то как?

1 Ответ

0 голосов
/ 07 мая 2018

Вам необходимо отменить выбор объекта с помощью discardActiveObject() и добавлять значение каждый раз при нажатии. +=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>
...