Ткань JS анимация.Работает по клику, но только один раз.Как я могу заставить его работать после каждого клика? - PullRequest
Новая
       5

Ткань JS анимация.Работает по клику, но только один раз.Как я могу заставить его работать после каждого клика?

0 голосов
/ 24 сентября 2018

Только начал изучать Fabric.js.Пожалуйста, смотрите код ниже.Цель состоит в том, чтобы объект вращался на 360 градусов всякий раз, когда пользователь нажимает на него.Это работает в первый раз для каждого квадрата.Но если я нажимаю на квадрат во второй раз, анимация отсутствует.Что я делаю не так? 

var canvas = new fabric.Canvas('game', {
  width: 900,
  height: 600
});

var rectLets = [];
var drawGrid = function() {
  var start = 50;
  var gap = 5;
  var numcols = 3;
  var numrows = 3;
  var size = 100;

  for (var i = 0; i < numrows; i++) {
    for (var j = 0; j < numcols; j++) {
      var top = start + i * (size + gap);
      var left = start + j * (size + gap);
      console.log("top, left = ", top, left);
      var rect = new fabric.Rect({
        fill: 'indianred',
        width: size,
        height: size,
        originX: 'center',
        originY: 'center',
      });

      var letA = new fabric.Text('A', {
        originX: 'center',
        originY: 'center'
      });

      var group = new fabric.Group([rect, letA], {
        left: left,
        top: top,
        originX: 'center',
        originY: 'center',
        lockMovementX: true,
        lockMovementY: true,
        lockScalingX: true,
        lockScalingY: true,
        lockRotation: true
      });

      rectLets.push(group);
    }
  }
};

drawGrid();
rectLets.forEach(function(objinst) {
  objinst.on('mousedown', function(e) {
    console.log(e.target);
    e.target.animate({
      'angle': 360
    }, {
      onChange: canvas.renderAll.bind(canvas)
    });
  });
});

rectLets.forEach(function(rect) {
  canvas.add(rect);
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="row" style="margin-top: 100px;">
    <div class="col s10 offset-s2">
        <canvas id="game"></canvas>
    </div>
</div>

1 Ответ

0 голосов
/ 25 сентября 2018

У Animate есть обратный вызов onComplete, установите для угла объекта значение 0.Поскольку вы все время анимируете до 360, вы не можете видеть эффект.

DEMO 

var canvas = new fabric.Canvas('game', {
  width: 900,
  height: 600
});

var rectLets = [];
var drawGrid = function() {
  var start = 50;
  var gap = 5;
  var numcols = 3;
  var numrows = 3;
  var size = 100;

  for (var i = 0; i < numrows; i++) {
    for (var j = 0; j < numcols; j++) {
      var top = start + i * (size + gap);
      var left = start + j * (size + gap);
      console.log("top, left = ", top, left);
      var rect = new fabric.Rect({
        fill: 'indianred',
        width: size,
        height: size,
        originX: 'center',
        originY: 'center'
      });

      var letA = new fabric.Text('A', {
        originX: 'center',
        originY: 'center'
      });

      var group = new fabric.Group([rect, letA], {
        left: left,
        top: top,
        originX: 'center',
        originY: 'center',
        lockMovementX: true,
        lockMovementY: true,
        lockScalingX: true,
        lockScalingY: true,
        lockRotation: true,
        hasBorders:false,
        hasControls:false
      });

      rectLets.push(group);
    }
  }
};

drawGrid();
rectLets.forEach(function(objinst) {
  objinst.on('mousedown', function(e) {
    console.log(e.target);
    e.target.animate({
      'angle': 360
    }, {
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: function(){
        e.target.angle = 0;
      }
    });
  });
});

rectLets.forEach(function(rect) {
  canvas.add(rect);
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="row" style="margin-top: 100px;">
    <div class="col s10 offset-s2">
        <canvas id="game"></canvas>
    </div>
</div>
...