浏览 17189 次
|
锁定老帖子 主题：任意旋转图片的js实例
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-25
最后修改：2010-01-27
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>任意旋转图片</title>
<script type="text/javascript" src="coos.ui.rotate.js"></script>
</head>
<body>
<div id="inner"><img id="theimage" border="0" src="logo.jpg" /></div>
<div style="position:absolute;top:235px;height:40px;">
<input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" onclick="rotateRight('theimage',90);">
<input type="button" value="顺时针Rotate->" name="RotateR" id="RotateR" onclick="rotateLeft('theimage',90);">
<input type="button" value="顺时针270" name="RotateR" id="RotateR" onclick="rotateLeft('theimage',270);">
</div>
</body>
</html>
function rotate(id,angle,whence) {
var p = document.getElementById(id);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
function rotateRight(id,angle) {
rotate(id,angle==undefined?90:angle);
}
function rotateLeft(id,angle) {
rotate(id,angle==undefined?-90:-angle);
}
注：有个问题是gif动画图片在火狐下旋转后不会动的，在ie下正常。jpg图片没有问题。
图片旋转本身比较容易，但要在固定最大宽高上作旋转比较麻烦，要等比例改变图片的宽高，而且同样的缩放算法在ie和火狐下效果不一样，对于比例不规则的图片，要达到满意的效果很难搞。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-25
如果能带有缓动的效果旋转，这就是一个很有动感的特效了。不然动作就有点生硬。但是谢谢你的分享，让我们的思路更加开阔。
|
| 返回顶楼 | |
|
发表时间：2010-01-26
不错。
我之前也写过一个图片360°旋转的动画，代码不知道哪去了。 基本上对于非IE，就是Canvas，对于IE则可以用滤镜或者VML来实现。 楼主判断IE用的是这句 if (document.all && !window.opera) { 我觉得可能不是很好，保不定其他浏览器什么时候也支持document.all了 一般用使用到的对象来做检测是最可靠的，对于本例： 可以检测是否支持style.filter 也可以检测是否支持canvas.getContext |
| 返回顶楼 | |
|
发表时间：2010-01-27
一般用使用到的对象来做检测是最可靠的
你说的没错，基于功能的检测是最可靠的，不过有时候也会有问题，如果有同样的功能但实现方法不一样，返回的值不一样还是不能直接用的，浏览器的判断还是必要的。 要其他浏览器支持document.all估计不太可能，到那个时候估计现在写的代码早就没用了。 图片旋转本身比较容易，但要在固定最大宽高上作旋转比较麻烦，要等比例改变图片的宽高，而且同样的缩放算法在ie和火狐下效果不一样，对于比例不规则的图片，要达到满意的效果很难搞。 |
| 返回顶楼 | |
|
发表时间：2010-01-30
Javaeye搞什么灰机
附件就是下载不了！！！ |
| 返回顶楼 | |
|
发表时间：2010-01-31
楼主的代码来自jquery-rotate这个插件吧？see：http://code.google.com/p/jquery-rotate/ 。rotate这个函数还应该提供一个回调函数，每次旋转后触发一个事件，用户可以调整相关dom样式。
另外， canvas.oImage = new Image();canvas.oImage.src = p.src; 这两句里面有个隐藏很深的bug--firefox下图片未加载时context.drawImage会报错，应该改成 canvas.oImage = p; |
| 返回顶楼 | |
|
发表时间：2010-01-31
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
看到这 FF悲剧了~ |
| 返回顶楼 | |
|
发表时间：2010-10-07
我也写过类似的图片旋转效果
还可以翻转和缩放 |
| 返回顶楼 | |
