Question

我尝试在javascript中创建一个360度旋转的图像，它从左到右完美地工作但是当我尝试从下到上和从上到下移动它然后它没有完美地工作我想要创建这样的演示在示例中显示 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 + ")")
            }
        }

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

但它没有完美的工作，所以任何人都可以帮助我......

Answer 1

我想你指出了这个小故障的动作......你只需要添加更多具有更多视角的图像

Answer 2

这是通过创建将视图转换为Image url的函数来实现此目的的一种方法。 view具有原始视角，对图像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;
}

然后在鼠标事件中捕获鼠标的移动。

const mouse  = {x : 0, y : 0, dx : 0, dy : 0, button : false}
function mouseEvents(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    // as we dont process the mouse events here the movements must be cumulative 
    mouse.dx += e.movementX;
    mouse.dY += e.movementY;
    mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
}

最后是动画功能。

 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 = "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
   }

如何在javascript

2 个答案: