filter: matrix

описание:
позволяет изменять размеры элемента, вращать его или изменять характеристики на противоположные (понимание основ линейной алгебры упростит работу с этим фильтром)

пример использования:

<script type="text/javascript">
var deg2radians = Math.PI * 260/360;

function SetTheRotation(Obj, deg)
   {
   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;
   }
  
function ResizeTheBox(Obj, Multiplier)
   {
   Obj.filters.item(0).M11 *= Multiplier;
   Obj.filters.item(0).M12 *= Multiplier;
   Obj.filters.item(0).M21 *= Multiplier;
   Obj.filters.item(0).M22 *= Multiplier;
   }
  
var Count = 800;
function SpinIt(Obj)
   {
   var  Multiple = Count / 720;
   Count += 8;
   if (Count >= 360 * 4) Obj.onClick = null;
   SetTheRotation(Obj, Count);
   ResizeTheBox(Obj, Multiple);
   }
</script>

<div class="img">
   <img src="blank.gif" alt="Результат применения фильтра matrix" />
   <div id="matrix" style="position: absolute; margin: 0 0 0 -200px; filter: progid:DXImageTransform.Microsoft.matrix(sizingMethod='auto expand');">
      <img src="clock.jpg" alt="Результат применения фильтра matrix" />
   </div>
</div>

<button onClick="SpinIt('matrix')">посмотреть</button>
<button onClick="SetTheRotation('matrix', 0)">обновить</button>

параметры:

• Dx (Dy) - определяют координаты x и y линейного преобразрвания
• FilterType - метод, используемый для формирования новых данных (каждое из этих значений определяет цвет для целевого объекта)
  • bilinear
  • nearest neighbor
• M11 (M12) - задают первую строку линейного преобразования
• M21 (M22) - задают вторую строку линейного преобразования
• sizingMethod - определяет, ограничивается ли содержимое блоком
  • auto expand - увеличивает размеры блока, чтобы уместить новые данные
  • clip to original - сохраняет размеры блока

поддержка браузеров: Internet Explorer все версии

• 17
• 1
• 2
• 3
• 4
• 5

23.09.07 просмотров: 1774