正在检查登录状态... | 繁體中文 | 设为首页 | 加入收藏
点击:199 | 评论:0 | 辅助功能: 复制 | 打印 | 字体: | |

mootools 图像旋转类

作者: 蓝天下云层上 发表于
版权声明:转载请征求作者同意,转载时必以超链接形式标明文章原始出处和作者信息及版权声明。
/blog/weblog-21222-1.html
var imageRotate = new Class ({
initialize: function(img) {
this._img = img;
this.rotation = 0;
this.width = img.getProperty('width');
this.height = img.getProperty('height');
if (!Browser.ie) {
var canvas = new Element('canvas', {'width': this.width, 'height': this.height});
this.ctx = canvas.getContext('2d');
this.ctx.drawImage(this._img, 0, 0);
this._ghost = this._img;
this._img = canvas.replaces(this._img);
}
},

rotate: function() {
switch (this.rotation) {
case 0:
this._img.setProperty('width', this.width);
this._img.setProperty('height', this.height);
break;

case 1:
this._img.setProperty('width', this.height);
this._img.setProperty('height', this.width);
break;

case 2:
this._img.setProperty('width', this.width);
this._img.setProperty('height', this.height);
break;

case 3:
this._img.setProperty('width', this.height);
this._img.setProperty('height', this.width);
break;
}

if (Browser.ie) {
this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ this.rotation + ')';
}
else {
switch (this.rotation) {
case 0:
this.ctx.drawImage(this._ghost, 0, 0);
break;

case 1:
this.ctx.rotate(90*Math.PI/180);
this.ctx.drawImage(this._ghost, 0, -this.height);
break;

case 2:
this.ctx.rotate(180*Math.PI/180);
this.ctx.drawImage(this._ghost, -this._ghost.width, -this._ghost.height);
break;

case 3:
this.ctx.rotate(270*Math.PI/180);
this.ctx.drawImage(this._ghost, -this._ghost.width, 0);
break;
}
}
},

left: function() {
if (this.rotation == 0) {
this.rotation = 3;
}
else {
this.rotation--;
}
this.rotate();
},

right: function() {
if (this.rotation == 3) {
this.rotation = 0;
}
else {
this.rotation++;
}
this.rotate();
}
});

参考:
http://foxling.cn/js-ajax-dom/js-rotate-picture/

此日志的引用通告 URL:
http://www.imx365.net/blog/tb.cgi/21222

其实我一直都不知道您在想些什么,有什么感触。说真的,您的评论对于我来说很重要...

还没有人评论过

发表评论
  • (地址不公开)

(访客)