iT邦幫忙

0

旋轉圖片以及改變大小

chan15 2009-06-16 22:45:0915548 瀏覽

我今天想要對一張圖片做放大縮小功能以及旋轉的功能
放大縮小很簡單,用animate就可以了
animate({width: '+=4'}, 0);

http://code.google.com/p/jquery-rotate/
http://wilq32.googlepages.com/wilq32.rollimage222
我試了幾個plugin,如果先旋轉再改變大小則可以正常使用,但如果先改變大小後按旋轉的話大小會跑回原本的尺寸,請問有更好的作法嗎?

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rotate</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>



<img src="images/1.gif" name="myImg" id="myImg" /><br />
<a href="#" id="rL"><</a> <a href="#" id="add">+</a>
<script language="javascript">
<!--
	$(function() {
		$('#add').click(function() {
			$('#myImg').animate({width: '+=4'}, 0);
			return false;
		});
			
		$('#rL').click(function() {
			$('#myImg').rotateLeft([angle=5]);
			return false;
		});
	});
//-->
</script> 

1 個回答

34
fillano
iT邦超人 1 級 ‧ 2009-06-17 01:11:34
最佳解答

稍微看了一下jquery-rotate的程式。

javascript沒有辦法真正改變圖檔的長寬,jquery-rotate是利用microsoft的濾鏡或是canvas來做旋轉,同樣也並沒有改變圖檔的長寬。

而且,jquery-rotate程式中會去取得圖檔的實際長寬來做計算,這一點改不了的,這會有點難辦...

有一個做法是去改jquery-rotate的程式,加上一個resize的參數,例如resize倍數,小於1會縮小,大於1會放大,然後IE濾鏡的部份,把每個參數都乘以這個倍數,就可以resize。Canvas改起來比較複雜,直接看程式吧。

<pre class="c" name="code">
jQuery.fn.rotate = function(angle,resizefactor,whence) {
	var p = this.get(0);
		
	// we store the angle inside the image tag for persistence
	resizefactor = resizefactor==undefined?1:resizefactor;
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
		p.resizefactor = (p.resizefactor==undefined?1:p.resizefactor) * resizefactor;
	} else {
		p.angle = angle;
		p.resizefactor = resizefactor
	}
	
	
	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*p.resizefactor)+",M12="+(-sintheta*p.resizefactor)+",M21="+(sintheta*p.resizefactor)+",M22="+(costheta*p.resizefactor)+",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*p.resizefactor) + Math.abs(sintheta*canvas.oImage.height*p.resizefactor);
		canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height*p.resizefactor) + Math.abs(sintheta*canvas.oImage.width*p.resizefactor);

		var context = canvas.getContext('2d');
		context.save();
		if (rotation <= Math.PI/2) {
			context.translate(sintheta*canvas.oImage.height*p.resizefactor,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-costheta*canvas.oImage.height*p.resizefactor);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-costheta*canvas.oImage.width*p.resizefactor,canvas.height);
		} else {
			context.translate(0,-sintheta*canvas.oImage.width*p.resizefactor);
		}
		context.rotate(rotation);
		context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width*p.resizefactor, canvas.oImage.height*p.resizefactor);
		context.restore();
	}
	canvas.id = p.id;
	canvas.angle = p.angle;
	canvas.resizefactor = p.resizefactor;
	p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle,resizefactor) {
	this.rotate(angle==undefined?90:angle,resizefactor==undefined?1:resizefactor);
}

jQuery.fn.rotateLeft = function(angle,resizefactor) {
	this.rotate(angle==undefined?-90:-angle,resizefactor==undefined?1:resizefactor);
}

我改了函數參數,所以參數要修改一下:
rotate(angle, resize, whence)
angle:角度
resize:以1為基礎的縮放倍數
whence:接續之前的參數(false的話,每次都是從角度0倍數1開始畫;true的畫會從上次的角度與縮放倍數開始計算,角度會相加,倍數會相乘)
rotateRight(angle, resize)同上,但是whence會是true
rotateLeft(angle, resize)同上,逆時針轉動,whence同樣會是true

簡單的使用:

<pre class="c" name="code">


<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>
<script>
$(document).ready(function() {
	$("#image").rotate(30,0.5,true);
	$("#image").rotate(30,1,false);
});
</script>


<img src="bg/test001.jpg" id="image">

請試試看吧。

看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2009-06-17 01:22:41 檢舉

http://www.fillano.idv.tw/test483.html

跟上面的例子一樣。

fillano iT邦超人 1 級 ‧ 2009-06-17 01:25:36 檢舉

測試了一下...只有IE跟Firefox可以正常運作,google chrome跟safari沒辦法。

tom6507 iT邦大師 1 級 ‧ 2009-06-17 08:08:38 檢舉

請受狐狸一拜(高手高手高高手)

fireflybug iT邦研究生 5 級 ‧ 2009-06-17 09:10:58 檢舉

嗯 真的是高手露一手,太厲害了!
數學應該很好吧@@

fillano iT邦超人 1 級 ‧ 2009-06-17 10:05:44 檢舉

沒,這是別人寫的,我只是加個參數來修改圖片大小。

我要發表回答

立即登入回答