javascript - 如何在fabricjs Canvas 上对圆的scaleX和scaleY进行动画处理

Question

我正在尝试在 fabricjs Canvas 上为对象(在我的例子中为圆圈)的scaleX和scaleY设置动画，但我无法使其工作。这是我的片段

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(){
    animateCircle(circle, 1);
});


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 =>
    {
        pointA.animate({
            scaleX: dir ? maxScale : minScale,
            scaleY: dir ? maxScale : minScale
        }, {
                easing: fabric.util.ease.easeOutCubic,
                duration: 3000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function ()
                {

                    resolve('finished animating the point');
                }


            });
    });

}

<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>

Answer 1

在 animateCircle() 函数中，您尝试将转换应用于名为 pointA 的对象。

嗯，这个对象不存在 - 您想要设置动画的对象称为圆，您在此处定义了它:

circle = makeCircle(52.69, 17.77);

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;
  animateCircle(circle, 1);
});


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>