Поделиться через

Как применить преобразования к тексту

  • Статья

Преобразования могут изменить отображение текста в приложении. В следующем примере используются различные типы преобразований при отрисовке, которые влияют на отображение текста в элементе управления TextBlock.

Пример

В следующем примере показан текст, повернутый относительно заданной точки в двумерной плоскости x-y.

Пример текста, повернутого на 90 градусов

Текст, повернутый с использованием RotateTransform

В следующем примере кода для поворота текста используется RotateTransform. Значение 90 свойства Angle поворачивает элемента на 90 градусов по часовой стрелке.

<!-- Rotate the text 90 degrees using a RotateTransform. -->
<TextBlock FontFamily="Arial Black" FontSize="64" Foreground="Moccasin" Margin ="80, 10, 0, 0">
  Text Transforms
  <TextBlock.RenderTransform>
    <RotateTransform Angle="90" />
  </TextBlock.RenderTransform>
</TextBlock>

Следующий пример показывает вторую строку текста, масштабированную на 150% вдоль оси x, и третью строку текста, масштабированную на 150% вдоль оси y.

Пример масштабированного текста

Текст, масштабируемый с использованием ScaleTransform

В следующем примере кода используется объект ScaleTransform для масштабирования текста из исходного размера.

<!-- Scale the text using a ScaleTransform. -->
<TextBlock
  Name="textblockScaleMaster" 
  FontSize="32"
  Foreground="SteelBlue"
  Text="Scaled Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="2">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
  </TextBlock.RenderTransform>
</TextBlock>
ПримечаниеПримечание

Масштабирование текста отличается от увеличения размера шрифта текста.Размеры шрифтов вычисляются независимо друг от друга, чтобы обеспечить лучшее разрешение в разных размерах.Масштабируемой текст, в свою очередь, сохраняет пропорции исходного размера текста.

В следующем примере показан текст, наклоненный вдоль оси x.

Пример наклоненного текста

Текст, искаженный с использованием SkewTransform

В следующем примере кода используется объект SkewTransform для наклона текста. Наклон, также известный как сдвиг, является преобразованием, при котором пространство координат увеличивается неравномерно. В этом примере две текстовые строки поворачиваются на -30 ° и 30° вдоль оси координат x.

<!-- Skew the text using a SkewTransform. -->
<TextBlock
  Name="textblockSkewMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text"
  Margin="125, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="-30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="{Binding Path=Text, ElementName=textblockSkewMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

В следующем примере показан переведенный текст (или перемещенный) вдоль оси x и y.

Пример переведенного текста

Смещение текста с использованием TranslateTransform

В следующем примере кода используется объект TranslateTransform для смещения текста. В этом примере немного смещенная копия текста под основным текстом создает эффект тени.

<!-- Skew the text using a TranslateTransform. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="{Binding Path=Text, ElementName=textblockTranslateMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Name="textblockTranslateMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0"/>
ПримечаниеПримечание

Объект DropShadowBitmapEffect предоставляет широкий набор возможностей с использованием эффекта тени.Дополнительные сведения см. в разделе Практическое руководство. Создание текста с тенью.

См. также

Задачи

Практическое руководство. Применение анимаций к тексту