spin

by Zaid Sheriff

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.js"></script>
<canvas id="canvas"></canvas>

JavaScript

var URL = 'https://codyhouse.co/demo/360-degrees-product-viewer/img/alfa.png';
var canvas = new fabric.Canvas('canvas', {
    selection: false
  }),
  imgObject;
var positions = {
  topSteps: 1,
  leftSteps: 16
};
var y = 0;
var x = 0;
var topStep;
var leftStep;
var isMouseDown = false;
var imgObject, pixelToSkip = 10;
var clickedPointer, currPointer, diff;
canWalk(URL, positions);

function canWalk(URL, positions) {
  var myImage = new Image();
  myImage.src = URL;
  //var mDown = false;      
  //onloadevent
  myImage.onload = function() {
    topStep = myImage.naturalHeight / positions.topSteps;
    leftStep = myImage.naturalWidth / positions.leftSteps;
    var docCanvas = document.getElementById('canvas');
    docCanvas.height = topStep;
    docCanvas.width = leftStep;
    fabricImageFromURL(x, y);
  };
}
//mouseevents 
canvas.on('mouse:down', function(event) {
  isMouseDown = true;
  prevPointer = canvas.getPointer(event.e);

})
canvas.on('mouse:out', function(event) {
  console.log("mouseout")
  /*  x=0;
  y=0;
  fabricImageFromURL(x,y);*/
});
canvas.on('mouse:move', function(event) {
  if (!isMouseDown) return;
  currPointer = canvas.getPointer(event.e);
  diff = currPointer.x - prevPointer.x;
  
  if (diff < -pixelToSkip) {
    if (x < positions.leftSteps) { //16
      fabricImageFromURL(y,-x * leftStep)
      x++;
    }
    if (x == positions.leftSteps) {
      x = 0;
    }
    prevPointer = currPointer;
  } else if(diff > pixelToSkip){
    if (x == 0) {
      x = positions.leftSteps;
    }
    if (x <= positions.leftSteps) {
      fabricImageFromURL(y,-x * leftStep)
      x--;
    }
    prevPointer = currPointer;
  }
});
canvas.on('mouse:up', function(event) {
  isMouseDown = false;
})

function fabricImageFromURL(top, left)
    {
        console.log('fabricImageFromURL value',top, left);
        fabric.Image.fromURL(URL, function (oImg) {
            oImg.set('left', left).set('top',top);
            oImg.hasControls = false;
           ...