[개발자팁] [js] 이미지 돌리기 소스 Matrix filter
<html>
<head>
<title></title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function rotate(name, angle){
//convert angle into radians
var rad = degToRad(angle);
//calculate cos and sin of the angle
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
//create object reference
var el = document.getElementById(name);
if(el) {
//apply the filter
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
//set up the properties
el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";
//apply the rotation matrix transformation
el.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta;
}
}
var pi = Math.PI;
function degToRad(x) { return ( x/(360/(2*pi)) ); }
function radToDeg(x) { return ( x*(360/(2*pi)) ); }
function spin()
{
var form=document.forms['frm'];
if(!form) return;
if(form.angle.value.length < 1)
{
alert("각도를 입력하세요~");
return;
}else
{
rotate('img', parseInt(form.angle.value));
form.angle.value = "";
}
}
//-->
</SCRIPT>
<img id="img2" src="http://www.dbtool.co.kr/images/bestsite/1164854109140/car2.jpg">
<div id="temp" style="position:absolute; left:100; top:100;">
<form name="frm">
각도 : <input type="text" name="angle">
<a href="javascript:spin();">돌려</a><BR><BR>
<img id="img" src="http://www.dbtool.co.kr/images/bestsite/1164854109140/car2.jpg">
</form>
</div>
</body>
</html>
아래는 관련 댓글들입니다. 댓글수: 1
