개체의 내용의 크기 조정, 회전, 역회전등 변환하여 표현한다.

Script object.style.filter='progid:DXImageTransform.Microsoft.(propVal)'
HTML <ELEMENT style="filter:progid:DXImageTransform.Microsoft.(propVal)">
Matrix 필터 예제(클릭)
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

애트리뷰트 속성 설명
Dx Dx 선형 변형의 인수 벡터 X 부분을 반환하거나 설정한다.
Dy Dy 선형 변형의 인수 벡터 Y 부분을 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
FilterType FilterType 변환하여 만들어진 새로운 픽셀의 정의에 사용된 방식을 반환하거나 설정한다.
M11 M11 줄의 변환에서 첫번째 줄/ 첫번째 컬럼의 비율을 반환하거나 설정한다.
M12 M12 줄의 변환에서 첫번째 줄/ 두번째 컬럼의 비율을 반환하거나 설정한다.
M21 M21 줄의 변환에서 두번번째 줄/ 첫번째 컬럼의 비율을 반환하거나 설정한다.
M22 M22 줄의 변환에서 두번째 줄/ 두번째 컬럼의 비율을 반환하거나 설정한다.
SizingMethod SizingMethod 결과 이미지에 따라 용기 개체의 크기가 조정되는가를 반환하거나 설정한다.
특기

Matrix 필터 사용의 간단한 방법.

이들 효과는 선상 변환으로 가능하다. Matrix 필터는 디스플레이된 내용의 선상 벡터(linear vector) 2x2 마트릭스(matrix)에 의해 선상 변환을 생성한다. 선상 논리를 잘 알아야 선상 변환의 최대의 효과를 낼 수 있지만, 위에 설명한 간단한 방식으로 사용할 수 있다.

최종 이미지는 원본 이미지의 필터에 의해 변환된 표현이다. padding 스타일 속성을 사용하여 최종 이미지의 잘림을 최소화 할 수 있다.

적용style
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, hn, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, plainText, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성으로 크기 조절 예제


Matrix 필터 예제


필터 표시창

Matrix 필터에서 크기를 조절하기 위해서는 M11=2,M12=1,M21=0,M22=2등 입력사항이 필요하다.

공통 변수를 각 비율에 곱하여 Matrix 필터로 크기를 조정할 수 있다. multiX 값에 의하여 원래 내용이 확대되거나 축소된다.

<SCRIPT>
var org1Mx=new Array();
function doResize(job,obj,multiX){
  if (org1Mx=='') org1Mx.push(obj.filters.item(0).M11,obj.filters.item(0).M12,obj.filters.item(0).M21,obj.filters.item(0).M22);
  if (job==2){org1Mx.splice(0,4,'2','1','0','2');}
  if (job==3){org1Mx.splice(0,4,'0','1','1','1');job=2;}
  if (job==4){org1Mx.splice(0,4,'1','0','1','1');job=2;}
  if (job==5){org1Mx.splice(0,4,'1','1','0','1');job=2;}
  if (job==6){org1Mx.splice(0,4,'1','1','1','0');job=2;}
  if (job==7){org1Mx.splice(0,4,'1','0','0','1');job=2;}
  if (job==8){org1Mx.splice(0,4,'0','1','1','0');job=2;}
  if (job==9){org1Mx.splice(0,4,'2','1','1','2');job=2;}
  if (job==10){org1Mx.splice(0,4,'1','2','1','.1');job=2;}
  if (!job) obj.filters[0].Enabled=false;
  else {
    obj.filters[0].Enabled=true;
    if (job==1){
      obj.filters.item(0).M11 *=multiX;
      obj.filters.item(0).M12 *=multiX;
      obj.filters.item(0).M21 *=multiX;
      obj.filters.item(0).M22 *=multiX;
    } else if (job==2){
      obj.filters.item(0).M11=org1Mx[0];
      obj.filters.item(0).M12=org1Mx[1];
      obj.filters.item(0).M21=org1Mx[2];
      obj.filters.item(0).M22=org1Mx[3];
    }
  }
  str='';
  str+='obj.style.filter='+obj.style.filter+'<BR>';
  str+='⇒Enabled=('+obj.filters[0].Enabled+'), ';
  str+='multiX=('+multiX+'), ';
  str+='M11=('+obj.filters.item(0).M11+'), ';
  str+='M12=('+obj.filters.item(0).M12+'), ';
  str+='M21=('+obj.filters.item(0).M21+'), ';
  str+='M22=('+obj.filters.item(0).M22+')';
  show1.innerHTML=str;
}
</SCRIPT>
<STYLE>.butClass{width:150}</STYLE>
<DIV id="obj1" style="width:600;height:400;font-size:10;line-height:1.2em;font-wright:bold;background-color:pink;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=2,M12=1,M21=0,M22=2)">
<IMG src=../../gif/rfexample.gif><BR>
Matrix 필터 예제
</DIV>
<BUTTON onClick="doResize(0,obj1,2)" class="butClass">정상 이미지</BUTTON>
<BUTTON onclick="doResize(1,obj1,2)" class="butClass">확대 필터 효과</BUTTON>
<BUTTON onclick="doResize(1,obj1,.5)" class="butClass">축소 필터 효과</BUTTON>
<BUTTON onclick="doResize(2,obj1,2)" class="butClass">초기화 A</BUTTON><BR>
<BUTTON onclick="doResize(3,obj1,2)" class="butClass">초기화 B</BUTTON>
<BUTTON onclick="doResize(4,obj1,2)" class="butClass">초기화 C</BUTTON>
<BUTTON onclick="doResize(5,obj1,2)" class="butClass">초기화 D</BUTTON>
<BUTTON onclick="doResize(6,obj1,2)" class="butClass">초기화 E</BUTTON><BR>
<BUTTON onclick="doResize(7,obj1,2)" class="butClass">초기화 F</BUTTON>
<BUTTON onclick="doResize(8,obj1,2)" class="butClass">초기화 G</BUTTON>
<BUTTON onclick="doResize(9,obj1,2)" class="butClass">초기화 H</BUTTON>
<BUTTON onclick="doResize(10,obj1,2)" class="butClass">초기화 I</BUTTON>
<DIV id=show1 style="width:600;height:45;border:solid 1 blue;padding:3;font-size:90%">필터 표시창</DIV>