如何在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 
    }