programming/jsp

이미지회전(IE)

labj 2012. 3. 21. 13:14

<!doctype html public "-//w3c//dtd html 4//en">
<html>

<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=euc-kr">
<meta name="keywords" content="자바스크립트,javascript,매뉴얼,웹디자인,프로그래밍,style,filter,css">
<meta name="author" content="KoXo Trio">
<link rel="stylesheet"  type="text/css" href="">
<style type="text/css">
<!--
body {
 background-color: #FFFFFF;
}

.seat_text_c1 {
 position: absolute;
 border: none;
 font-family: verdana;
 font-size: 10pt;
 font-style: normal;
 font-weight: bold;
 letter-spacing: -1pt;
 text-align: center;
 vertical-align:middle;
 width: 31px;
 height: 17px;
 top: 29px;
 left: 6px;
}

.seat_bg_c1 {
 border: none;
 margin: 0px;
 width: 41px;
 height: 54px;
}

.seat_text_c2 {
 position: absolute;
 border: none;
 font-family: verdana;
 font-size: 10pt;
 font-style: normal;
 font-weight: bold;
 letter-spacing: -1pt;
 text-align: center;
 vertical-align:middle;
 width: 31px;
 height: 17px;
 top: 38px;
 left: 16px;
}

.seat_bg_c2 {
 border: none;
 margin: 0px;
 width: 41px;
 height: 54px;
}


#seat1 {
}
#seat2 {
}
#seat3 {
background: url(./160/table_r_o3.gif) no-repeat center;
}
#seat4 {
background: url(./160/table_r_o4.gif) no-repeat center;
}


-->
</style>

</head>

<body>

<script>
fileName=objDesc='[Matrix 필터 속성 예제]';
file='Matrix';
clsType='exp';
objectSw=collSw=propSw=styleSw=filterSw=methodSw=behaviorSw=eventSw=sampleSw=exampleSw=0;

</script>


<script>

// degree->radian 변환 
function toRad(value1) {
  return value1 * Math.PI / 180;
}

var degree = 0;
var xvalue = 0;
var yvalue = 0;
var deg2radians=Math.PI*2/360;

function doRotate(job1,obj,deg1) {

 var deg = document.getElementById("value1").value; //각도
 var xvalue = document.getElementById("value2").value; //x
 var yvalue = document.getElementById("value3").value; //y
 var job = document.getElementById("value4").value; //필터적용여부
 //var obj = document.getElementById("value5").value; //객체
 
 
 
 var a = (document.getElementById('seat1').width/2) * (document.getElementById('seat1').width/2);
 var b = (document.getElementById('seat1').height/2) * (document.getElementById('seat1').height/2);
 var centerRadiusLeng = Math.round(Math.sqrt(a+b));
 
 var initx = document.getElementById('seat1').width/2;
 var inity = document.getElementById('seat1').height/2;
 
 alert(centerRadiusLeng);
 
 var xLength = Math.round(centerRadiusLeng*Math.cos(toRad(deg+45))); //Math.round(
 var yLength = Math.round(centerRadiusLeng*Math.sin(toRad(deg+45))); 
 
 alert(initx+'/'+inity +':'+ xLength +'/'+yLength);
 
 xvalue = initx + xLength;
 yvalue = inity + yLength;
 
 alert(xvalue+'/'+yvalue);
 xvalue = 11;
 yvalue = -20;
 

 
 
 
 
 
 
 

  if (!job) obj.filters[0].Enabled=false;
  else if (job==1){
    obj.filters[0].Enabled=true;
    //rad=deg*deg2radians;
 rad = toRad(deg);
    costheta=Math.cos(rad);
    sintheta=Math.sin(rad);
    obj.filters.item(0).M11=costheta;
    obj.filters.item(0).M12=-sintheta;
    obj.filters.item(0).M21=sintheta;
    obj.filters.item(0).M22=costheta;
 obj.filters.item(0).Dx=xvalue;
 obj.filters.item(0).Dy=yvalue; 
  }

}
</script>

<div id="obj1" style="position: absolute; width:64px;height:64px;font-size:10;line-height:1.2em;font-wright:bold;filter:progid:DXImageTransform.Microsoft.Matrix()">
 <div style="position:absolute; left:1px; top:0px;  z-index:0; " class="seat_bg_c2" >
  <img src="test11.gif" width="64" height="64" id="seat1"> 
  <div id="seat1_text" class="seat_text_c2" style="cursor:default; ">001</div>
  </div> 
</div>

<div id="obj2" style="position: absolute; width:64px; height:64px; font-size:10; line-height:1.2em; font-wright:bold; filter:progid:DXImageTransform.Microsoft.Matrix(); left: 48px; top: 14px;">
 <div style="position:absolute; left:2px; top:2px;  z-index:0; " class="seat_bg_c2" >
  <img src="F4_view3_table_rh_o1.gif" id="seat2"> 
  <div id="seat2_text" class="seat_text_c2" style="cursor:default; ">002</div>
  </div> 
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
 각도:<input name="value1" id="value1" type="text" value="0">&nbsp;
 x:<input name="value2" id="value2" type="text" value="0">&nbsp;<br>
 y:<input name="value3" id="value3" type="text" value="0">&nbsp;
 필터적용:<input name="value4" id="value4" type="text" value="1">&nbsp;<br>
 object:<input name="value5" id="value5" type="text" value="obj1">&nbsp;
 <input type="button" value="회전하기" onclick="doRotate(0,obj1,0);"><br>

<p>&nbsp;</p>
<button onClick="doRotate(0,obj1,30)" style="width:100">정상 이미지</button>
<button onclick="doRotate(1,obj1,20)" style="width:100">20&deg; 각도</button>
<button onclick="doRotate(1,obj1,30)" style="width:100">30&deg; 각도</button>
<button onclick="doRotate(1,obj1,60)" style="width:100">60&deg; 각도</button>
<button onclick="doRotate(1,obj1,-10)" style="width:100">음수 각도</button>
<button onclick="doRotate(1,obj1,350)" style="width:100">350&deg; 각도</button>
<p>&nbsp;</p>
<button onClick="doRotate(0,obj2,30)" style="width:100">정상 이미지</button>
<button onclick="doRotate(1,obj2,20)" style="width:100">20&deg; 각도</button>
<button onclick="doRotate(1,obj2,30)" style="width:100">30&deg; 각도</button>
<button onclick="doRotate(1,obj2,60)" style="width:100">60&deg; 각도</button>
<button onclick="doRotate(1,obj2,-10)" style="width:100">음수 각도</button>
<button onclick="doRotate(1,obj2,350)" style="width:100">350&deg; 각도</button>

 


</div>

</body>

</html>

'programming > jsp' 카테고리의 다른 글

[웹2.0을 이끄는 방탄웹] 1 글씨 크기를 마음대로  (0) 2012.03.21
jsp로 RSS 서비스 하기  (0) 2012.03.21
이미지회전(파이어폭스)  (0) 2012.03.21
'jsessionid'를 통해서 session이 사라지는 문제 해결  (0) 2012.03.21
크로스도메인 자바스크립트 엑세스 문제 해결  (0) 2012.03.21

'programming/jsp'의 다른글

  • 현재글이미지회전(IE)

관련글

티스토리툴바