如何在结构js中360度视图中旋转精灵图像

Question

但问题是我无法根据用户交互旋转精灵图像。例如：当用户向右移动鼠标时，右侧框架应移动，当用户向左移动时，左侧移动帧我应该移动iam无法在fabric js中实现这一点。我所做的只是旋转精灵图像onmouse move。我想要的预期输出是这样的：https://codyhouse.co/demo/360-degrees-product-viewer/index.html

var URL = 'https://codyhouse.co/demo/360-degrees-product-viewer/img/alfa.png';
var canvas = new fabric.Canvas('canvas');
var positions = {
  topSteps: 1,
  leftSteps: 16
};
var y = 0;
var x = 0;
var topStep;
var leftStep;
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:out', function (event) {
  console.log("mouseout")
  /*  x=0;
  y=0;
  fabricImageFromURL(x,y);*/
});
canvas.on('mouse:move', function (event) {
  resetvalue();
  setTimeout(function () {
    console.log('value of x in start', x)
    console.log('positions.leftSteps', positions.leftSteps)
    if (x == positions.leftSteps) {

      y = 1;
      fabricImageFromURL(-y * topStep, -x * leftStep)
    }
    else {

      fabricImageFromURL(-y * topStep, -x * leftStep)
      if (x < positions.leftSteps) {
        x++;
      }

    }

  }, 50);

});

function resetvalue() {
  if (x == positions.leftSteps) {
    x = 0;
    y = 0;
    console.log("x and y value reset to0")
  }

}
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;
    oImg.hasBorders = false;
    oImg.selectable = false;
    canvas.add(oImg);
    canvas.renderAll();
  }, { "left": 0, "top": 0, "scaleX": 1, "scaleY": 1 });
}

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

Answer 1

由于我们没有更改最高值，因此无需始终设置最高值，只需为图像设置左值即可。 pixelToSkip是mousemove像素调用函数之间的区别，如果鼠标移动差异小于那个，那么它就不会调用。

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;
    canvas.setDimensions({
    height : topStep,
    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) {
      x = 0;
    }
    
    fabricImageFromURL(-x * leftStep)
    x++;

    prevPointer = currPointer;
  } else if(diff > pixelToSkip){
    if (x == 0) {
      x = positions.leftSteps;
    }
    
    x--;
    fabricImageFromURL(-x * leftStep)
    
    prevPointer = currPointer;
  }
});
canvas.on('mouse:up', function(event) {
  isMouseDown = false;
})

function fabricImageFromURL(left) {
  if (!imgObject) return
  imgObject.set('left', left);
  canvas.renderAll();
}

fabric.Image.fromURL(URL, function(oImg) {
  imgObject = oImg;
  oImg.set({
    left: 0,
    top: 0,
    hasControls: false,
    hasBorders: false,
    selectable: false
  });
  canvas.add(oImg);
  canvas.renderAll();
});

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