图片旋转

【题记】微博图片都支持左右旋转效果，我们来看下是如何实现的

【正文】在IE浏览器里面，可以通过滤镜实现，具体属性如下：

BasicImage Filter

MSDN里面的链接：http://msdn.microsoft.com/zh-cn/ms532972

 

我们只需要设置

this.img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + this.direction + ')';.

 有MSDN上面的知识可知，this.direction 值只要在0,1,2,3之间变化就可以，每个值代表一个方向

 在其他浏览器里面，我们通过canvas

具体教程：https://developer.mozilla.org/cn/Canvas_tutorial

 

<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

 

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

 然后获取图像一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种

drawImage(image, x, y)

 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

 

然后旋转 

 

rotate(angle)

 

这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

具体教程如下：https://developer.mozilla.org/cn/Canvas_tutorial/Transformations

 其中涉及到角度知识：

 

数学知识

弧度 = 角度 * Math.PI / 180

 

 

综上所述

我们把方法封装了下，具体代码如下：

 

 

function Rotate(img){
    this.init(img);
}

Rotate.prototype = {
    constructor : Rotate,
    init : function(img){
        this.img = img;
        if(!document.all){
            var canvas = document.createElement("canvas");
            this.ctx = canvas.getContext('2d');
            canvas.setAttribute("width", this.img.width);
            canvas.setAttribute("height", this.img.height);
            this.ctx.drawImage(this.img,0,0);
            this.ghost = this.img;
            this.img.parentNode.replaceChild(canvas,this.img);
            this.img = canvas;            
        }
        this.direction = 0;
    },
    run : function(){
        
        if(document.all){
            this.img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + this.direction + ')';
        }else{
            switch (this.direction){
                case 0:
                    this.img.setAttribute('width',this.ghost.width);
                    this.img.setAttribute('height',this.ghost.height);
                    this.ctx.drawImage(this.ghost, 0, 0);
                    break;
                case 1:
                    this.img.setAttribute('width', this.ghost.height);
                    this.img.setAttribute('height', this.ghost.width);
                    this.ctx.rotate(90 * Math.PI / 180);
                    this.ctx.drawImage(this.ghost, 0, - this.ghost.height);
                    break;
                case 2:
                    this.img.setAttribute('width', this.ghost.width);
                    this.img.setAttribute('height', this.ghost.height);
                    this.ctx.rotate(180 * Math.PI / 180);
                    this.ctx.drawImage(this.ghost, - this.ghost.width, - this.ghost.height);
                    break;
                case 3:
                    this.img.setAttribute('width', this.ghost.height);
                    this.img.setAttribute('height', this.ghost.width);
                    this.ctx.rotate(270 * Math.PI / 180);
                    this.ctx.drawImage(this.ghost, - this.ghost.width, 0);
                    break;
            }        
        }    
    
    },
    runLeft : function(){    
        this.direction--;
        if(this.direction < 0){
            this.direction = 3;
        }
        
        if(this.direction >= 4){
            this.direction = 0;
        }
        this.directionun();
        
    },
    runRight : function(){    
        this.direction++;        
        if(this.direction < 0){
            this.direction = 3;
        }
        
        if(this.direction > 3){
            this.direction = 0;
        }
        this.directionun();
            
    }
};

 

 调用方法：

    var rotate = new Rotate(img);
    
    turnRight.onclick = function(){
        rotate.runRight();
    };
    
    turnLeft.onclick = function(){
        rotate.runLeft();
    };

 

 测试代码打包如下，请狠狠点击：/Files/sniper007/图片旋转.rar

 【总结】写图片旋转期间参考其他人写的例子，具体忘了，找到后我会把参考地址贴上去的