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

Question

我试图创建一个图像旋转360度的JavaScript，这是从左到右的完美工作，但当我尝试将它从下到上和顶部移动到底部，那么它没有很好地工作，我想创建这样一个演示其显示例如 http://www.ajax-zoom.com/examples/example28_clean.php

e(f).mousemove(function(e) 
      { 
       if (s == true) dx(e.pageX - this.offsetLeft,e.pageY - this.offsetTop); 
       else o = e.pageX - this.offsetLeft; f = e.pageY- this.offsetTop; 
      }); 

function dx(t,q) { 
     console.log("t.....x. px.."+t+" -"+ px +"-----q---------y------"+q); 
     if(f - q > 0.1) 
     { 

     f = q; 
     a="left-top/"; 
     i=43; 
     r = --r < 1 ? i : r; 

       e(u).css("background-image", "url(" + a + r + "." + c + ")") 
     //r = --r < 1 ? i : r; 

    // e(u).css("background-image", "url(" + a + 73 + "." + c + ")") 
     }else if (f - q < -0.1) { 
     f = q; 
     a="left-top/"; 
      i=43; 
       r = ++r > i ? 1 : r; 
       e(u).css("background-image", "url(" + a + r + "." + c + ")") 


     } 
      if (o - t > 0.1) { 
       o = t; 
       r = --r < 1 ? i : r; 
       e(u).css("background-image", "url(" + a + r + "." + c + ")") 
      } else if (o - t < -0.1) { 
       o = t; 
       r = ++r > i ? 1 : r; 
       e(u).css("background-image", "url(" + a + r + "." + c + ")") 
      } 
     } 

其中：一个是图像文件夹的路径，r为（张数1,2,3,4 ....）和c是.png文件

但它不能正常工作，所以任何人都可以帮助我......

Answer 1

我认为你指出了这个失败的运动......你只需要增加更多视角的图像

Answer 2

这是通过创建一个将视图转换为图像url的函数的方法。 view具有原始视角，对图片网址格式或限制一无所知。功能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 
}; 

创建将采取度函数旋转（左，右）和度旋转，向上（向下）并将其转换为正确的图像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使用网址为allImages

与

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

更换

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 
    }