360 degree

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;
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;
    clickedPointer = 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 - clickedPointer.x;
    console.log("diff",diff)
    if(diff<0){ 
        resetvalue();
        console.log("leftx",x)
        //console.log('left===>'+x)
        if(x <= positions.leftSteps){
            fabricImageFromURL(-y * topStep, -x * leftStep)
            x++;
        }
    }
    else{ 
        resetvalueopp();
       //console.log('right===>'+x)
       //x=16;
       //if(x>=positions.topSteps)
       //{
        console.log("x",x)
            fabricImageFromURL(-y * topStep, -x * leftStep)
            x--;
        //}
    }

});
canvas.on('mouse:up', function (event) {
    isMouseDown = false;
})
function resetvalue() {
    if (x > positions.leftSteps) {
        x = 0;
        y = 0;
        console.log("x and y value reset to0")
   ...