Трансформація Windows Runtime

У Windows Runtime всі візуальні елементи, успадковані відUIElement, Підтримують трансформації Під трансформацією ми будемо розуміти перетворення щодо прямокутної (Декартовой) системи координат Розглянемо види трансформацій

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp RotateTransform – Повертає заданий елемент на вказаний кут і навколо зазначеної точки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ScaleTransform – Призначена для стиснення або розширення елемента в задану кількість разів Як параметри слід вказати ScaleX і ScaleY, Які визначають, у скільки разів потрібно стиснути або розширити елемент по кожній з осей Якщо значення цих властивостей від 0 до 1, то елемент стискається, а якщо більше 1, то розширюється

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp SkewTransform – Дозволяє нахилити заданий елемент по осях X і Y

Як параметр приймає кути нахилу AngleX і AngleY

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp TranslateTransform  – Дозволяє перемістити елемент на вказаний проміжок по осях X і Y

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp MatrixTransform  – Дозволяє задати матрицю трансформації для перетворення елемента

Щоб встановити трансформацію для одного з елементів, досить створити обєкт відповідної трансформації і заповнити цим обєктом властивість елемента RenderTransform Якщо Ви хочете використовувати декілька трансформацій одночасно, то для заповненняRenderTransform використовуєтьсяTransformGroup, Що дозволяє обєднати кілька видів трансформації Розглянемо приклад, який обєднує всі стандартні види трансформації, при цьому користувач може міняти їх властивості за допомогою повзунків Ось код цього прикладу

&ltStackPanel x:Name=&quotLayoutRoot&quot Background=&quotWhite&quot&gt

&ltRectangle Width=&quot200&quot Height=&quot100&quot Fill=&quotRed&quot&gt

&ltRectangleRenderTransform&gt

&ltTransformGroup&gt

&ltRotateTransform Angle=

&quot{Binding Value, ElementName=rotateSlider, Mode=OneWay}&quot CenterX=&quot100&quot CenterY=&quot50&quot&gt

&lt/RotateTransform&gt

&ltScaleTransform  CenterX=&quot100&quot CenterY=&quot50&quot

ScaleX=

&quot{Binding Value, ElementName=scaleXSlider, Mode=OneWay}&quot ScaleY=

&quot{Binding Value, ElementName=scaleYSlider, Mode=OneWay}&quot&gt

&lt/ScaleTransform&gt

&ltSkewTransform CenterX=&quot100&quot CenterY=&quot50&quot AngleX=

&quot{Binding Value, ElementName=skewXSlider, Mode=OneWay}&quot AngleY=

&quot{Binding Value, ElementName=skewYSlider, Mode=OneWay}&quot&gt

&lt/SkewTransform&gt

&ltTranslateTransform X=

&quot{Binding Value, ElementName=translateXSlider, Mode=OneWay}&quot Y=

&quot{Binding Value, ElementName=translateYSlider, Mode=OneWay}&quot&gt

&lt/TranslateTransform&gt

&lt/TransformGroup&gt

&lt/RectangleRenderTransform&gt

&lt/Rectangle&gt

&ltSlider Width=&quot200&quot Name=&quotrotateSlider&quot Minimum=&quot0&quot Maximum=&quot360&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotscaleXSlider&quot Minimum=&quot0&quot Maximum=&quot2&quot Value=&quot1&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotscaleYSlider&quot Minimum=&quot0&quot Maximum=&quot2&quot Value=&quot1&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotskewXSlider&quot Minimum=&quot-180&quot Maximum=&quot180&quot Value=&quot0&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotskewYSlider&quot Minimum=&quot-180&quot Maximum=&quot180&quot Value=&quot0&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quottranslateXSlider&quot Minimum=&quot-100&quot Maximum=&quot100&quot Value=&quot0&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quottranslateYSlider&quot Minimum=&quot-100&quot Maximum=&quot100&quot Value=&quot0&quot&gt

&lt/Slider&gt

&lt/StackPanel&gt

Результат роботи програми показаний нижче:

Рис 47

Зверніть увагу на те, що трансформація не впливає на компоновку елементів, тобто елементи компоновки не враховують трансформацію

Існує ще один тип трансформації –CompositeTransform, Який обєднує всі основні трансформації При його використанні розробник витрачає менше часу на реалізацію програмного взаємодії з інтерфейсом Хоча даний тип трансформації можна використовувати тільки в тому випадку, якщо Ви хочете реалізувати комбінацію трансформацій, привязаних до одного центру Перепишемо вищевказаний приклад, використовуючи новий тип трансформації

&ltStackPanel x:Name=&quotLayoutRoot&quot Background=&quotWhite&quot&gt

&ltRectangle Width=&quot200&quot Height=&quot100&quot Fill=&quotRed&quot&gt

&ltRectangleRenderTransform&gt

&ltCompositeTransform CenterX=&quot100&quot CenterY=&quot50&quot ScaleX=

&quot{Binding Value, ElementName=scaleXSlider, Mode=OneWay}&quot ScaleY=

&quot{Binding Value, ElementName=scaleYSlider, Mode=OneWay}&quot Rotation=

&quot{Binding Value, ElementName=rotateSlider, Mode=OneWay}&quot SkewX=

&quot{Binding Value, ElementName=skewXSlider, Mode=OneWay}&quot SkewY=

&quot{Binding Value, ElementName=skewYSlider, Mode=OneWay}&quot TranslateX=

&quot{Binding Value, ElementName=translateXSlider, Mode=OneWay}&quot TranslateY=

&quot{Binding Value, ElementName=translateYSlider, Mode=OneWay}&quot&gt

&lt/CompositeTransform&gt

&lt/RectangleRenderTransform&gt

&lt/Rectangle&gt

&ltSlider Width=&quot200&quot Name=&quotrotateSlider&quot Minimum=&quot0&quot Maximum=&quot360&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotscaleXSlider&quot Minimum=&quot0&quot Maximum=&quot2&quot Value=&quot1&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotscaleYSlider&quot Minimum=&quot0&quot Maximum=&quot2&quot Value=&quot1&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotskewXSlider&quot Minimum=&quot-180&quot Maximum=&quot180&quot Value=&quot0&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quotskewYSlider&quot Minimum=&quot-180&quot Maximum=&quot180&quot Value=&quot0&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quottranslateXSlider&quot Minimum=&quot-100&quot Maximum=&quot100&quot Value=&quot0&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot200&quot Name=&quottranslateYSlider&quot Minimum=&quot-100&quot Maximum=&quot100&quot Value=&quot0&quot&gt

&lt/Slider&gt

&lt/StackPanel&gt

Тепер код виглядає більш приємно, а розробник взаємодіє з одним обєктом замість чотирьох

Ще один тип трансформації визначається елементомPlaneProjection, Який дозволяє реалізовувати найпоширеніші завдання по роботі в тривимірному просторі З одного боку, його можна використовувати по відношенню до будь-якого елементу або навіть деяким контейнерам (Border), А з іншого – він має досить прості властивості, що дозволяють задати кути повороту і розташувати обєкт в тривимірному просторі Нижче наведено приклад використання обєкта PlaneProjection по відношенню до MediaElement, Отображающему відео

&ltStackPanel x:Name=&quotLayoutRoot&quot Background=&quotWhite&quot&gt

&ltMediaElement Source=&quotWildLifewmv&quot Width=&quot400&quot Height=&quot300&quot&gt

&ltMediaElementProjection&gt

&ltPlaneProjection RotationX=

&quot{Binding Value, ElementName=rotateXSlider, Mode=OneWay}&quot RotationY=

&quot{Binding Value, ElementName=rotateYSlider, Mode=OneWay}&quot RotationZ=

&quot{Binding Value, ElementName=rotateZSlider, Mode=OneWay}&quot&gt

&lt/PlaneProjection&gt

&lt/MediaElementProjection&gt

&lt/MediaElement&gt

&ltSlider Width=&quot400&quot Minimum=&quot0&quot Maximum=&quot360&quot Name=&quotrotateXSlider&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot400&quot Minimum=&quot0&quot Maximum=&quot360&quot Name=&quotrotateYSlider&quot&gt

&lt/Slider&gt

&ltSlider Width=&quot400&quot Minimum=&quot0&quot Maximum=&quot360&quot Name=&quotrotateZSlider&quot&gt

&lt/Slider&gt

&lt/StackPanel&gt

У даному випадку використовувалися властивостіRotationX, RotationY,  RotationZ, Що дозволяють розгорнути елемент по кожній з осей в тривимірному просторі на задану кількість градусів Результат роботи цього коду відображається на екрані таким чином

Рис 48

Зверніть увагу, що, на відміну від трансформацій, проекції мають свій контейнер, що не перетинається з RenderTransform

Додатково в елементі PlaneProjection існують атрибути, що дозволяють задати початок координат в тривимірному просторі, а також зсув елемента по кожній з осей При цьому зміщення можна відраховувати щодо поточного контейнера або всього вікна Ось ці властивості:CenterOfRotationX, CenterOfRotationY,        CenterOfRotationZ,       LocalOffsetX,       LocalOffsetY, LocalOffsetZ, GlobalOffsetX, GlobalOffsetY, GlobalOffsetZ

Сергій Лутай, Сергій Байдачний, Windows 8 для C # розробників

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*