javascriptで画像を360度回転させる方法

Question

左から右へと完全に動作している画像を360度回転させようとしていますが、上から下へaは、画像フォルダのパスで、rは画像の数（1,2,3,4です：下のそれは私が例に 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 + ")") 
      } 
     } 

を示し、このようなデモを作成したい完璧に動作しませんでした....）とcは.pngファイル

しかし、それは完全に動作していないので、誰も私を助けることができる...

Answer 1

私は不思議な動きを指摘していると思います。もっと多くの画像を追加する必要があります。

Answer 2

これは、ビューをImage URLに変換する機能を作成する方法の1つです。 viewには生の視野角があり、画像URLの形式や制限については何も知らない。関数createImageURLはビューをイメージURLに変換し、必要に応じてビューに制限を適用します。

アニメーション機能は、マウスの動きを使用してビューを更新し、ビューを更新してURL機能を呼び出し、現在のURLを取得します。私は最初の（右から左）度回転を取り、度がアップ回転する関数を作成します

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 
}; 

現在のビューを保持するためにVARSを作成

T

、プリロードを行うためにあなたにそれを残します（下）、正しい画像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"; 

を交換するためのプロパティ名を取得するためにURLを使用

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