如何在javascript中旋转图像（上下360度）

我试图用javascript创建一个360度旋转的图像，它可以从左到右完美地工作，但当我尝试从下到上、从上到下移动它时，它并没有完美地工作，我想创建这样一个演示，如示例所示

e（f）.鼠标移动（函数（e）
{
如果（s==true）dx（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
else o=e.pageX-this.offsetLeft；f=e.pageY-this.offsetTop；
});
函数dx（t，q）{
console.log（“t..x.px..+t+”-“+px+”----q----y----q）；
如果（f-q>0.1）
{
f=q；
a=“左上/”；
i=43；
r=--r<1？i:r；
css（“背景图像”，“url”（+a+r+“+c+”））
//r=--r<1？i:r；
//css（“背景图像”，“url”（+a+73+“+c+”））
}否则如果（f-q<-0.1）{
f=q；
a=“左上/”；
i=43；
r=++r>i？1:r；
css（“背景图像”，“url”（+a+r+“+c+”））
}
如果（o-t>0.1）{
o=t；
r=--r<1？i:r；
css（“背景图像”，“url”（+a+r+“+c+”））
}否则如果（o-t<-0.1）{
o=t；
r=++r>i？1:r；
css（“背景图像”，“url”（+a+r+“+c+”））
}
}

其中：a是图像文件夹的路径，r是图像数（1,2,3,4…），c是.png文件

---

但它工作不完美，所以有人能帮我吗…

我想你是在指出这个小动作。。。你只需添加更多具有更多透视效果的图像

这是通过创建一个函数将视图转换为图像url来实现的一种方法。

视图

具有原始视角，对图像URL格式或限制一无所知。函数

createImageURL

将视图转换为图像URL，并在需要时对视图应用限制

动画函数使用鼠标移动来更新视图，然后调用URL函数来获取当前URL。我让你来做预加载，T

因此，首先创建变量来保存当前视图

const view = {
    rotUp : 0,
    rotLeftRigh : 0,
    speedX : 0.1,  // converts from pixels to deg. can reverse with neg val
    speedY : 0.1,  // converts from pixels to deg
};

创建一个函数，使deg旋转（左-右）和deg向上旋转（下），并将其转换为正确的图像URL

// returns the url for the image to fit view
function createImageURL(view){
     var rotate = view.rotLeftRight;
     var rotateUp = view.rotUp;
     const rSteps = 24;  // number of rotate images
     const rStepStringWidth = 3;   // width of rotate image index
     const upStep = 5;   // deg step of rotate up
     const maxUp = 90;   // max up angle
     const minUp = 0; // min up angle
     const rotateUpToken = "#UP#";  // token to replace in URL for rotate up
     const rotateToken = "#ROT#";  // token to replace in URL for rotate
     // URL has token (above two lines) that will be replaced by this function
     const url = "http://www.ajax-zoom.com/pic/zoomthumb/N/i/Nike_Air_#UP#_#ROT#_720x480.jpg";

     // make rotate fit 0-360 range
     rotate = ((rotate % 360) + 360) % 360);
     rotate /= 360; // normalize
     rotate *= rSteps; // adjust for number of rotation images.
     rotate = Math.floor(rotate);   // round off value
     rotate += 1; // adjust for start index
     rotate = "" + rotate; // convert to string
     // pad with leading zeros
     while(rotate.length < rStepStringWidth) {rotate = "0" + rotate }

     // set min max of rotate up;
     rotateUp = rotateUp < upMin ? upMin : rotateUp > upMax ? upMax : rotateUp;
     view.rotUp = rotateUp; // need to set the view or the movement will
                            // get stuck at top or bottom
     // move rotate up to the nearest valid value
     rotateUp = Math.round(rotateUp / upStep) * upStep;

     // set min max of rotate again as the rounding may bring it outside 
     // the min max range;
     rotateUp = rotateUp < upMin ? upMin : rotateUp > upMax ? upMax : rotateUp;

     url = url.replace(rotateUpToken,rotateUP);
     url = url.replace(rotateToken,rotate);
     return url;
}

最后是动画功能

 function update(){
     // if there is movement
     if(mouse.dx !== 0 || mouse.dy !== 0){ 
          view.rotUp += mouse.dy * view.speedY;
          view.rotLeftRight += mouse.dx * view.speedX;
          mouse.dx = mouse.dy = 0;
          // get the URL
          const url = createImageURL(view);
          // use that to load or find the image and then display
          // it if loaded.
      }
      requestAnimationFrame(update);
  }
  requestAnimationFrame(update);

createImageURL还可以用于创建对对象中图像的引用

const URLPart = "http://www.ajax-zoom.com/pic/zoomthumb/N/i/Nike_Air_"
const allImages = {
  I_90_001 : (()=>{const i=new Image; i.src=URLPart+"_90_001_720x480.jpg"; return i;})(),
  I_90_002 : (()=>{const i=new Image; i.src=URLPart+"_90_002_720x480.jpg"; return i;})(),
  I_90_003 : (()=>{const i=new Image; i.src=URLPart+"_90_003_720x480.jpg"; return i;})(),
  ... and so on Or better yet automate it.

在

createImageURL

中，使用URL获取

allImages

替换

   const url = "http://www.ajax-zoom.com/pic/zoomthumb/N/i/Nike_Air_#UP#_#ROT#_720x480.jpg";

与

然后你可以得到图像

   const currentImage = allImages[createImageURL(view)];
   if(currentImage.complete){  // if loaded then 
       ctx.drawImage(currentImage,0,0);   // draw it
   }

---

你的答案最好是作为对问题的评论。不，已经为每个位置或方向添加了300张图片，50到70张图片。@Blindman67我对堆栈溢出非常陌生，我没有评论的特权。你能创建一个演示项目吗，或者如何在html页面上调用它

   const url = "http://www.ajax-zoom.com/pic/zoomthumb/N/i/Nike_Air_#UP#_#ROT#_720x480.jpg";

   const url = "I_#UP#_#ROT#";

   const currentImage = allImages[createImageURL(view)];
   if(currentImage.complete){  // if loaded then 
       ctx.drawImage(currentImage,0,0);   // draw it
   }