无法使用fabricjs来扩大和缩小对象第四和第四]]

Question

我有一个对象（在我的情况下为圆圈），我想让它来回移动多次（3次），就像闪烁的星星一样。

var counter;
const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
let circle;
document.addEventListener('DOMContentLoaded', function() {
  circle = makeCircle(52.69, 17.77);
  canvas.add(circle);
});

document.getElementById('animateBtn').addEventListener('click', function() {
  counter = 0;
  const result = animateCircle(circle, 1);
  console.log(result);
});


function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'yellow',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });


}

function animateCircle(circle, dir) {
  const minScale = 1;
  const maxScale = 2;

  return new Promise(resolve => {
    circle.animate({
      scaleX: dir ? maxScale : minScale,
      scaleY: dir ? maxScale : minScale
    }, {
      easing: fabric.util.ease.easeOutCubic,
      duration: 3000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        if (counter > 4) {
          resolve('finished animating the point');
        } else {
          if (dir == 1)
            animateCircle(circle, 0);
          else
            animateCircle(circle, 1);

        }
        counter++;
      }

    });
  });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate</button>

我的问题是，动画制作完成后，我在控制台中没有得到已解决的结果

。如果有人能告诉我出什么问题，我将不胜感激

我有一个对象（在我的情况下为圆圈），我想让它来回移动多次（3次），就像闪烁的星星一样。 var counter; const canvas = new fabric.Canvas（'...

Answer 1

实际上您确实将结果打印在控制台上。该函数返回一个Promise。使用此行console.log(result);打印该对象。您可以在控制台上看到该对象的输出。您无需等待承诺解决。 Promise异步工作。您只需在控制台上打印即可。因此它处于pending