Спонсор: Microsoft
Опубликован: 23.01.2009 | Уровень: для всех | Доступ: платный
Лекция 4:

Текст

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >

Расположение текста на кривой

Расположение текста вдоль произвольной кривой – это прием, который часто используется в рекламе. Встроенные возможности Silverlight не позволяют реализовывать его с помощью кода, написанного вручную. Однако это можно сделать при помощи пакета Microsoft Expression Design. Создаем новый проект, нарисуем произвольную кривую с помощью инструмента Pen, добавляем некоторый текст. Затем выделяем оба объекта, в главном меню программы выбираем пункт "Object \ Text on Path \ Attach Text" (рис. 4.10):

Расположение текста на кривой

увеличить изображение
Рис. 4.10. Расположение текста на кривой

В результате этого действия текст располагается на кривой, более того, он по-прежнему доступен для редактирования и изменения оформления (рис. 4.11):

 Текст на кривой остается текстом

увеличить изображение
Рис. 4.11. Текст на кривой остается текстом

Теперь нам нужно экспортировать созданную фигуру в объекты XAML. В главном меню выбираем пункт "File \ Export", в появившемся диалоговом окне выбираем значение "XAML Silverlight Canvas" выпадающего списка "Format". На момент создания курса доступна лишь опция "Paths", которая конвертирует отдельные буквы в объекты Path (рис. 4.12):

Экспорт объектов в XAML

увеличить изображение
Рис. 4.12. Экспорт объектов в XAML

Получившийся код XAML добавляем прямо в текущий листинг проекта (рис. 4.13):

Экспортированный код XAML в текущем проекте

увеличить изображение
Рис. 4.12. Экспортированный код XAML в текущем проекте

Запускаем приложение – мы видим в точности такую же фигуру, что и в исходном пакете Microsoft Expression Design (рис. 4.13):

Текст на кривой – готовый результат в браузере

увеличить изображение
Рис. 4.13. Текст на кривой – готовый результат в браузере

Конечно, тот же самый эффект доступен и при конвертировании графики в другой формат, например, PNG. Однако здесь мы получаем набор элементов Path, каждый из которых представляет букву. Листинг для слова "Текст" выглядит так:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800" Height="600"
  Background="White"
  x:Name="Page">
  
  <Path x:Name="Path" Width="419.082" 
Height="168.992" Canvas.Left="101.265" 
Canvas.Top="90.5107" Stretch="Fill" 
StrokeLineJoin="Round" Stroke="#FF000000"
 Fill="#FFFFFFFF" Data="F1 M 101.765,259.002C 
245.757,140.508 559.242,223.004 515.744,91.0107"/>
    <Canvas x:Name="Group" 
Width="360.821" Height="114.561" 
Canvas.Left="71.2641" Canvas.Top="137.94">
      <Path x:Name="Path_0" 
Width="30.6081" Height="35.0895" 
Canvas.Left="11.3213" Canvas.Top="79.4718" 
Stretch="Fill" Fill="#FF000000" 
Data="F1 M 31.9442,82.1916L 24.1733,87.8284L 41.9294,
112.307L 38.8211,114.561L 21.065,90.0831L 13.2942,95.72L 11.3213,93.0002L 
29.9713,79.4718L 31.9442,82.1916 Z "/>
      <Path x:Name="Path_1" 
Width="23.8502" Height="24.7328" 
Canvas.Left="40.3005" Canvas.Top="79.3634" 
Stretch="Fill" Fill="#FF000000" 
Data="F1 M 60.645,87.474L 46.2067,96.0632C 
47.5944,98.2688 49.2436,99.6279 51.1543,100.141C 
53.0651,100.653 55.0603,100.291 57.1401,99.0537C 
59.4778,97.6631 61.2152,95.6986 62.3523,93.1605L 
64.1507,96.1835C 63.1102,98.542 61.1032,100.606 
58.1296,102.375C 55.2248,104.103 52.3895,104.53 
49.624,103.656C 46.8584,102.782 44.471,100.656 
42.4617,97.2787C 40.5649,94.0902 39.9167,90.959 
40.5169,87.885C 41.1172,84.811 42.7494,82.4815 45.4136,80.8966C 
48.0735,79.3142 50.6476,78.9567 53.1358,79.824C 55.624,80.6913 
57.7858,82.6676 59.6212,85.753L 60.645,87.474 Z M 55.627,86.5496C 
54.5302,84.7352 53.229,83.5894 51.7233,83.1122C 50.2176,82.6349 
48.6612,82.8742 47.0541,83.8303C 45.5028,84.7531 44.5028,86.0695 
44.0539,87.7793C 43.6049,89.4892 43.765,91.279 
44.534,93.1487L 55.627,86.5496 Z "/>
      <Path x:Name="Path_2" 
Width="28.4188" Height="29.8683" 
Canvas.Left="61.2668" Canvas.Top="64.4395"
 Stretch="Fill" Fill="#FF000000" 
Data="F1 M 89.6856,85.7812L 84.7991,88.0619L 70.1068,82.1899L
 70.0184,82.2312L 74.8971,92.6836L 71.4175,94.3078L 61.2668,72.5601L
 64.7464,70.9359L 69.3967,80.8991L 69.485,80.8579L 74.1047,66.568L
 78.665,64.4395L 73.3412,79.7036L 89.6856,85.7812 Z "/>
      <Path x:Name="Path_3" 
Width="21.435" Height="25.4218" 
Canvas.Left="85.5037" Canvas.Top="57.1742" 
Stretch="Fill" Fill="#FF000000" 
Data="F1 M 106.939,77.8155C 105.643,79.5015 
103.832,80.7977 101.508,81.7042C 98.3588,82.9321
 95.417,82.8919 92.6823,81.5835C 89.9476,80.2752 
87.9408,77.9812 86.662,74.7018C 85.2342,71.0403 
85.1264,67.6946 86.3384,64.6648C 87.5505,61.6349 
89.8894,59.4442 93.3552,58.0927C 95.2885,57.3389 
97.1396,57.049 98.9088,57.2232L 100.388,61.0174C 
98.2882,60.4625 96.3042,60.5492 94.4362,61.2776C 
92.1815,62.1568 90.6441,63.6781 89.824,65.8413C 
89.0039,68.0045 89.1025,70.3905 90.1197,72.9992C 
91.1188,75.5613 92.588,77.3162 94.5273,78.2639C 
96.4666,79.2116 98.5799,79.2395 100.867,78.3476C 
102.8,77.5938 104.385,76.2891 105.62,74.4335L 106.939,77.8155 Z "/>
      <Path x:Name="Path_4" 
Width="18.3844" Height="26.2384" 
Canvas.Left="102.656" Canvas.Top="49.4775" 
Stretch="Fill" Fill="#FF000000" Data="F1 
M 121.04,52.6726L 114.194,54.9008L 120.581,74.5275L 116.93,75.7159L 
110.542,56.0891L 103.696,58.3174L 102.656,55.1223L 120.001,49.4775L
 121.04,52.6726 Z "/>
      </Canvas>
</Canvas>
4.1.

Возможности текста в XAML могут показаться достаточно скромными, по сравнению, скажем, со стандартным оформлением CSS. Однако технология очень быстро развивается и в будущем следует ожидать значительного увеличения функциональности.

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина