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

Question

I try to create a images rotate 360 degree in javascript which is working with left to right perfectly but when I try to move it with bottom to top and top to bottom then it didn't work perfectly I want to create such a demo which show in example 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 + ")")
            }
        }

Where : a is path of images folder, r is number of images(1,2,3,4....) and c is .png file

But it is not working perfectly so can Anyone help me...

Answer 1

我认为您指出了小故障运动...您只需要添加更多具有更多视角的图像

Answer 2

This is one way of doing it by creating a function that converts a view into a Image url. The view has the raw viewing angles and knows nothing about the image URL format or limits. The function createImageURL converts the view to the image URL and applies limits to the view if needed.

An animation function uses the mouse movement to update the view which then calls the URL function to get the current URL. I leave it to you to do the preloading, T

So first Create the vars to hold the current view

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

Create a function that will take the deg rotate (left right) and the deg rotate up (down) and convert it to the correct image 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;
}

Then in the mouse event you capture the movement of the mouse.

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

And then finally the animation function.

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

he createImageURL could also be used to create a referance to an image in an object.

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.

And in the createImageURL use the URL to get the property name for allImages

replacing

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

with

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

then you can get the image

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