[Vuejs]-How to reset animation of dougtesting.net?

by

0👍

You could use the luckyDrawWheel.rotationAngle = 0; and luckyDrawWheel.draw();

You code should then look like

let luckyDrawWheel = new Winwheel({
  canvasId: "lucky-draw-canvas",
  drawText: true,
  numSegments: 8,
  textAlignment: "inner",
  textFontSize: 10,
  textMargin: 35,
  textFontFamily: "TUV Poetsen One",
  imageOverlay: true,
  segments: [...],
  animation: {
    type: "spinToStop",
    duration: 5,
    spins: 8,
    callbackFinished: alertPrize,
  },
});
// Called when the animation as finished.
function alertPrize(indicatedSegment) {
  alert(indicatedSegment.text + ' says Hi');
  luckyDrawWheel.rotationAngle = 0;
  luckyDrawWheel.draw();
}
luckyDrawWheel.draw();

const runWheelBtn = document.getElementById("run_wheel");
runWheelBtn.addEventListener("click", () => {
  luckyDrawWheel.startAnimation();
});

Leave a comment