Графіка, трансформація і анімація Windows Runtime

Лінії, прямокутники, еліпси – все це є фундаментом для побудови більш складних елементів управління Наприклад, стандартна кнопка являє собою кілька прямокутників Тому вивчення примітивів, доступних в XAML, вкрай важливо, так як ці знання потрібні надалі при створенні власних елементів або при зміні зовнішнього вигляду існуючих

Основними графічними примітивами в Windows Runtime є:

Rectangle Прямокутник

Ellipse – Еліпс (як окремий випадок – коло)

Line – Пряма лінія

Polygon – Замкнутий контур Polyline – Незамкнутий контур Path – Лінії будь-якої складності

Всі перераховані графічні примітиви є спадкоємцями класу Shape, А він, у свою чергу, прямим спадкоємцем FrameworkElement З одного боку, це означає, що графічні примітиви можуть бути розміщені в будь-якому з контейнерів, а з іншого – графічні примітиви не мають більшості властивостей, які характерні елементам управління Незважаючи на це, клас Shape надає кілька загальних властивостей, які можуть бути використані всіма примітивами Розглянемо ці властивості

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Stroke – Задає кисть, якої промальовується обведення фігури

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeThickness – Задає ширину обведення

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Fill – Дозволяє встановити кисть заливки області, яка знаходиться всередині контуру фігури

Якщо говорити про контурі фігури, то тут можливі додаткові властивості,

задають обведення пунктиром або закруглення країв обведення

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeDashArray  – Дозволяє задати масив типу double, який визначає шаблон для обведення фігури пунктиром Значення в масиві визначають довжину ліній і пропусків у обводке примітиву

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeDashCap  – Визначає форму наконечників (кутів) обведення (пунктирів) Може приймати одне з чотирьох значень: Float, Round, Squared, Triangle

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeDashOffset – Зміщення обведення пунктиром

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeEndLineCap – Визначає вид наконечника кожного з пунктирів

(Кінець пунктиру) Може приймати значення: Float, Round,  Squared,

Triangle

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeStartLineCap – Визначає вид наконечника кожного з пунктирів (початок пунктиру) Може приймати значення:Float,  Round, Squared, Triangle

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp StrokeLineJoin – Визначає тип зєднання ліній в разі перетину

Може приймати наступні значення: Bevel, Miter, Round

Продемонструємо використання цих властивостей на першому графічному примітиві Rectangle

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

&ltRectangle Width=&quot300&quot Height=&quot100&quot Stroke=&quotBlack&quot StrokeThickness=&quot10&quot

RadiusX=&quot25&quot RadiusY=&quot25&quot Margin=&quot5&quot&gt&lt/Rectangle&gt

&ltRectangle Width=&quot300&quot Height=&quot100&quot Stroke=&quotBlack&quot StrokeThickness=&quot10&quot RadiusX=&quot25&quot RadiusY=&quot25&quot StrokeDashArray=&quot5,2,3,2&quot Margin=&quot5&quot&gt&lt/Rectangle&gt

&ltRectangle Width=&quot300&quot Height=&quot100&quot Stroke=&quotBlack&quot StrokeThickness=&quot10&quot RadiusX=&quot25&quot RadiusY=&quot25&quot StrokeDashArray=&quot5,2,3,2&quot StrokeDashCap=&quotTriangle&quot Margin=&quot5&quot&gt&lt/Rectangle&gt

&lt/StackPanel&gt

В результаті роботи цього коду на екрані зявляться наступні «прямокутники»

Рис 41

Як видно з коду, щоб створити прямокутник, досить задати властивості Width і Height, Які визначають довжину і ширину фігури Додаткові властивостіRadiusX  іRadiusY  задають кути вигину вершин прямокутника Перший прямокутник з нашого прикладу має суцільну обведення Для більшої наочності ми встановили ширину обведення, рівну 10 Другий і третій прямокутники включають додаткове властивість StrokeDashArray, Що задає довжину штрихів в 5 одиниць і 3 одиниці відповідно, а також величину пробілу в 2 одиниці Третій прямокутник задає промальовування закінчень штрихів у вигляді трикутників

Графічний примітивEllipse   дозволяє намалювати еліпс або коло Його основні властивості –Width  іHeight, Які визначають розміри горизонтального і вертикального діаметра еліпса

&ltEllipse Width=&quot300&quot Height=&quot100&quot StrokeThickness=&quot10&quot Stroke=&quotBlack&quot Fill=&quotRed&quot&gt

&lt/Ellipse&gt

У даному прикладі ми застосували ще одну властивість – Fill, Що дозволяє виконати заливку контуру При цьому була використана спеціальна кисть SolidColorBrush, Про яку мова піде пізніше Тим часом для властивостіFill існує конвертор, який перетворює імя кольору в кисть Результат роботи прикладу показано нижче

Рис 42

Наступний графічний примітив – Line, Що дозволяє відобразити пряму лінію Цьому елементу досить приймати координати початку і закінчення лінії

&ltLine X1=&quot0&quot Y1=&quot0&quot X2=&quot100&quot Y2=&quot100&quot Stroke=&quotBlack&quot&gt&lt/Line&gt

Виникає питання: щодо чого задаються координати Вони задаються щодо контейнера для графічного примітиву Якщо контейнером є Canvas, То проблем з прямою немає, а от якщо в якості контейнера використовувати інший елемент, то пряма буде зберігати довжину і нахил, але не матиме привязки до конкретних координатах

Наступний приклад демонструє використання примітиву Polygon, Який дозволяє створювати замкнуті контури

&ltPolygon Points=&quot0,50,50,0,100,0,150,50,150,100,100,150,50,150,0,100&quot Stroke=&quotBlack&quot StrokeThickness=&quot5&quot&gt

&lt/Polygon&gt

Як видно, тут достатньо вказати вершини фігури Порядок вершин має велике значення, так як визначає порядок промальовування контуру Результат роботи коду показаний нижче

Рис 43

Елемент Polyline аналогічний попередньому примітиву, але малює не замкнутий контур Ось аналогічний код

&ltPolyline Points=&quot0,50,50,0,100,0,150,50,150,100,100,150,50,150,0,100&quot Stroke=&quotBlack&quot StrokeThickness=&quot5&quot&gt

&lt/Polyline&gt

Результат роботи зазначеного прикладу буде виглядати трохи по-іншому

Рис 44

Нарешті, перейдемо до останнього графічному примітиву –Path Завдання цього обєкта полягає в побудові ліній будь-якої складності Фактично, він будує послідовність прямих і кривих ліній Незважаючи на всю складність обєкта, у нього тільки одне основне властивість — Data Дана властивість може містити або геометричні обєкти, про які мова піде далі, або набір даних, що складаються зі спеціальних команд Розглянемо невеликий приклад

&ltPath Stroke=&quotBlack&quot StrokeThickness=&quot5&quot Data=&quotM 10,100 C 10,300 300,-200 300,100&quot&gt

&lt/Path&gt

Результатом роботи цього коду буде крива, яка зображена на малюнку нижче

Рис 45

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

Існує кілька команд, які можна запамятати і використовувати в елементі Path

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp M – Дозволяє перейти в задану точку

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp L – Малює лінію від поточної точки до заданої

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp H – Малює горизонтальну лінію заданої довжини від поточної точки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp V – Малює вертикальну лінію заданої довжини від поточної точки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp C – Приймає в якості параметрів три точки і дозволяє побудувати кубічну криву Безьє, використовуючи поточну точку і третю точку Решта дві точки використовуються як допоміжні

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Q – Приймає в якості параметрів дві точки і дозволяє побудувати квадратичну криву Безьє, використовуючи поточну і другу точки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp S – Приймає в якості параметрів дві точки і дозволяє намалювати згладжену кубічну криву Безьє

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp T – Дозволяє побудувати згладжену квадратичну криву Безьє

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp A   – Дозволяє побудувати еліптичну дугу Приймає пять параметрів: розмір, кут повороту, один з двох сегментів (0 або 1), напрямок відліку кута (0 або 1), кінцеву точку

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Z – Завершує поточний контур, проводячи пряму лінію між початковою точкою і поточної

Ось ми і розглянули всі основні примітиви Перейдемо тепер до кистей,

за допомогою яких можна визначати заливку як вмісту, так і контуру

Сергій Лутай, Сергій Байдачний, 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>

*

*