Не работает анимированный обратный вызов Fabric.js - PullRequest
Новая
       7

Не работает анимированный обратный вызов Fabric.js

0 голосов
/ 10 октября 2018

В документации Fabric.js по анимации упоминается этот обратный вызов onChange: 

onChange: canvas.renderAll.bind(canvas)

Однако, когда я пытаюсь заменить это пользовательской функцией, анимация не отображается.Смотрите этот пример;анимация вниз не показывает, только анимация вверх.Что не так с этим кодом? 

var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.set({
  hasControls: false,
  selectable: false,
  hoverCursor: 'default',
  originX: 'center',
  originY: 'center'
});

rect1 = new fabric.Rect({
  left: 200,
  top: 0,
  width: 50,
  height: 50,
  fill: 'red',
  opacity: 0
});
canvas.add(rect1);
var button01 = new fabric.Circle({
  left: 20,
  top: 20,
  radius: 10,
  fill: '#c0c0c0',
  strokeWidth: 1,
  stroke: '#808080',
  hoverCursor: 'pointer'
});
canvas.add(button01);
button01.on('mousedown', function(options) {
  animate_down()
});
var text1 = new fabric.Text("Animate", {
  fontFamily: 'Arial',
  fontSize: 12,
  fill: 'black',
  left: 58,
  top: 20,
});
canvas.add(text1);


function animate_down() {
  rect1.animate({
    'top': 300,
    'opacity': 1
  }, {
    onChange: function() {
      canvas.renderAll.bind(canvas)
      /* some other code */
    },
    onComplete: animate_up,
    duration: 2000,
  });
}

function animate_up() {
  rect1.animate({
    'top': 0,
    'opacity': 0
  }, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 2000,
  });
}
#canvas {
	border:1px solid #000000;	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

1 Ответ

0 голосов
/ 10 октября 2018

Вам нужно позвонить canvas.requestRenderAll(); внутри вашего обратного вызова.Поскольку вы просто привязываете canvas к canvas.renderAll, но никогда не звоните. Документы

DEMO 

var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.set({
  hasControls: false,
  selectable: false,
  hoverCursor: 'default',
  originX: 'center',
  originY: 'center'
});

rect1 = new fabric.Rect({
  left: 200,
  top: 0,
  width: 50,
  height: 50,
  fill: 'red',
  opacity: 0
});
canvas.add(rect1);
var button01 = new fabric.Circle({
  left: 20,
  top: 20,
  radius: 10,
  fill: '#c0c0c0',
  strokeWidth: 1,
  stroke: '#808080',
  hoverCursor: 'pointer'
});
canvas.add(button01);
button01.on('mousedown', function(options) {
  animate_down()
});
var text1 = new fabric.Text("Animate", {
  fontFamily: 'Arial',
  fontSize: 12,
  fill: 'black',
  left: 58,
  top: 20,
});
canvas.add(text1);


function animate_down() {
  rect1.animate({
    'top': 300,
    'opacity': 1
  }, {
    onChange: function() {
      canvas.requestRenderAll();
      /* some other code */
    },
    onComplete: animate_up,
    duration: 2000,
  });
}

function animate_up() {
  rect1.animate({
    'top': 0,
    'opacity': 0
  }, {
    onChange: canvas.requestRenderAll.bind(canvas),
    duration: 2000,
  });
}
#canvas {
	border:1px solid #000000;	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>
...