Matrix 필터 예제

정상 이미지 20° 각도 30° 각도 60° 각도 음수 각도 350° 각도

필터 표시창

지정한 각도 deg 만큼 개체의 내용이 회전한다. 회전 중심점 x, y 좌표를 더해주면 중심점을 이동 시킬 수 있다.

<SCRIPT>
var deg2radians=Math.PI*2/360;
function doRotate(job,obj,deg){
  if (!job) obj.filters[0].Enabled=false;
  else if (job==1){
    obj.filters[0].Enabled=true;
    rad=deg*deg2radians;
    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;
  }
  str='';
  str+='obj.style.filter='+obj.style.filter+'<BR>';
  str+='⇒Enabled=('+obj.filters[0].Enabled+'), ';
  str+='deg=('+deg+')<BR>';
  str+='M11=('+obj.filters.item(0).M11+'), ';
  str+='M12=('+obj.filters.item(0).M12+')<BR>';
  str+='M21=('+obj.filters.item(0).M21+'), ';
  str+='M22=('+obj.filters.item(0).M22+')';
  show2.innerHTML=str;
}
</SCRIPT>
<DIV id="obj2" style="width:600;height:400;font-size:10;line-height:1.2em;font-wright:bold;background-color:pink;
filter:progid:DXImageTransform.Microsoft.Matrix()">
<IMG src=../../gif/rfexample.gif><BR>
Matrix 필터 예제
</DIV>
<BUTTON onClick="doRotate(0,obj2,30)" style="width:100">정상 이미지</BUTTON>
<BUTTON onclick="doRotate(1,obj2,20)" style="width:100">20° 각도</BUTTON>
<BUTTON onclick="doRotate(1,obj2,30)" style="width:100">30° 각도</BUTTON>
<BUTTON onclick="doRotate(1,obj2,60)" style="width:100">60° 각도</BUTTON>
<BUTTON onclick="doRotate(1,obj2,-30)" style="width:100">음수 각도</BUTTON>
<BUTTON onclick="doRotate(1,obj2,350)" style="width:100">350° 각도</BUTTON>
<DIV id=show2 style="width:600;height:90;border:solid 1 blue;padding:3;font-size:90%">필터 표시창</DIV>

Matrix 필터 예제

정상 이미지 Matrix 필터 효과 초기화하기 단계별 보기 다시 로딩

필터 표시창

<SCRIPT>
var deg2radians=Math.PI *2/360;
var gdeg=gmultiX=job=0;
var iCount=100;

function subRotation(deg){
  rad=deg*deg2radians ;
  costheta=Math.cos(rad);
  sintheta=Math.sin(rad);
  obj3.filters.item(0).M11=costheta;
  obj3.filters.item(0).M12=-sintheta;
  obj3.filters.item(0).M21=sintheta;
  obj3.filters.item(0).M22=costheta;
  gdeg=deg;
}

function subResize(multiX){
  obj3.filters.item(0).M11 *= multiX;
  obj3.filters.item(0).M12 *= multiX;
  obj3.filters.item(0).M21 *= multiX;
  obj3.filters.item(0).M22 *= multiX;
  gmultiX=multiX;
}

function doSpin(){
  if (!job) obj3.filters[0].Enabled=false;
  else {
    obj3.filters[0].Enabled=true;
    var multiX=iCount/360;
    if(job==2){
      iCount=95;
      multiX=0;
      job=0;
      obj3.filters[0].Enabled=false;
    }
    iCount+=5;
    if (iCount>360*2) return;
    if (job==3) obj3.onfilterchange=null;
    subRotation(iCount);
    subResize(multiX);
  }

  str='';
  str+='obj3.style.filter='+obj3.style.filter+'<BR>';
  str+='⇒Enabled=('+obj3.filters[0].Enabled+'), ';
  str+='iCount=('+iCount+'), deg=('+gdeg+'), multiX='+gmultiX+')<BR>';
  str+='M11=('+obj3.filters.item(0).M11+'), ';
  str+='M12=('+obj3.filters.item(0).M12+')<BR>';
  str+='M21=('+obj3.filters.item(0).M21+'), ';
  str+='M22=('+obj3.filters.item(0).M22+')';
  show3.innerHTML=str;
}
</SCRIPT>

<DIV id="obj3" style="position:absolute;border:solid 1 blue;padding:5;
  filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')" onfilterchange="doSpin()">
<DIV style="background-color:pink;padding:5;border:solid 1 red">
<IMG src=../../../gif/rfexample.gif><BR>
Matrix 필터 예제
</DIV>
</DIV>
<DIV style=height:200></DIV>
<BUTTON onClick="job=0;doSpin()" style="width:120">정상 이미지</BUTTON>
<BUTTON onclick="job=1;doSpin()" style="width:120">Matrix 필터 효과</BUTTON>
<BUTTON onclick="job=2;doSpin()" style="width:120">초기화하기</BUTTON>
<BUTTON onclick="job=3;doSpin()" style="width:120">단계별 보기</BUTTON>
<BUTTON onclick="document.location='../exp/xMatrix.html#exp3'" style="width:120">다시 로딩</BUTTON>
<DIV id=show3 style="width:600;height:90;border:solid 1 blue;padding:3;font-size:90%">필터 표시창</DIV>