Question

刚刚开始学习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>

Answer 1

Animate具有onComplete回调，在那里将对象角度设置为0。一直在动画制作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,
        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>

Fabric JS动画。单击即可工作，但仅一次。每次点击后如何使它工作？

1 个答案: