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

Элемент Path

< Лекция 2 || Лекция 3: 12345 || Лекция 4 >

Кривые Безье четвертого порядка (Quadratic Bezier Curve Command)

Кривые Безье четвертого порядка (квадратичные кривые) очень похожи на кубические, но они имеют только одну контрольную точку. Для их создания используются команды, приведенные в табл. 3.5.

Таблица 3.5. Команды для рисования кривых Безье четвертого порядка
Команда Описание Парамеры
Q/q (Quadratic Bezier Curve Command) Рисование квадратичной кривой Безье от текущей точки(MX, MY) до заданной (X,Y) с контрольной точкой (X1, Y1) (рис. 3.10) X1, Y1, X,Y
T/t (Smooth quadratic Bezier curve Command) Рисование кубической кривой Безье от текущей точки до заданной (X,Y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды X,Y
 Рисование квадратичной кривой Безье

Рис. 3.10. Рисование квадратичной кривой Безье

Наличие одной контрольной точки позволяет гораздо быстрее получать нужные кривые при написании кода.

Таблица 3.6. Примеры кривых Безье четвертого порядка
Код Вид в браузере
3.6.1
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">

<Path Stretch="Fill" 
Stroke="green" 
StrokeThickness="3"  
Canvas.Left="25" 
Canvas.Top="25" Data="
M25,75 Q100,25 175,75" />
	
</Canvas>

Изображение с опорными точками:

Описание
Простейшая квадратичная кривая Безье. Контрольная точка равноудалена от опорных
Код Вид в браузере
3.6.2
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="200" 
Height="100"
Background="White"
x:Name="Page">

<Path Stretch="Fill" 
Stroke="green" 
StrokeThickness="3"
Canvas.Left="25" 
Canvas.Top="25" 
Data="M25,75 q75,-50 150,0" />
	
</Canvas>

Изображение с опорными точками:

Описание
Точно такая же кривая, как и в предыдущем примере, но используется относительная команда
Код Вид в браузере
3.6.3
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="350" Height="150"
Background="White"
x:Name="Page">

<Path Stretch="Fill" 
Stroke="green" 
StrokeThickness="3"  
Canvas.Left="25"
Canvas.Top="25" Data="
M25,75 Q100,25 175,75 T 325,75" />
	
</Canvas>

Изображение с опорными точками:

Описание
После завершения квадратичной кривой добавляется команда T 325,75, которая использует в качестве своей контрольной точки отражение контрольной точки 100, 25 предыдущей команды (см. рис. 3.11)
Код Описание
3.6.4
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="350" Height="150"
Background="White"
x:Name="Page">

<Path Stretch="Fill" 
Stroke="green" 
StrokeThickness="3"  
Canvas.Left="25" 
Canvas.Top="25" Data="
M25,75 q75,-50 150,0 t 150,0" />
	
</Canvas>
Здесь получается та же самая фигура, что и в примере 3.6.3, но с использованием относительных координат. Для команды q75,-50 150,0 началом отсчета является первая опорная точка, для команды t 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой (рис. 3.11).
Вид в браузере
 Абсолютные и относительные координаты для примеров  3.6.3 и 3.6.4

увеличить изображение
Рис. 3.11. Абсолютные и относительные координаты для примеров 3.6.3 и 3.6.4
Код Описание
3.6.5
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="700" Height="150"
Background="White"
x:Name="Page">

<Path Stretch="Fill" 
Stroke="green" 
StrokeThickness="3"  
Canvas.Left="25" 
Canvas.Top="25" Data="
M25,75 Q100,25 175,75 T 325,75 
T475, 75 T 625,75" />
	
</Canvas>
При рисовании кривых с повторяющимися фрагментами удобно использовать команду T для упрощения кода. В данном примере все команды используют первую опорную точку M 25, 75
Вид в браузере
Изображение с опорными точками
Код Описание
3.6.6
<Canvas
 xmlns="http://schemas.microsoft.com/
 client/2007"
 xmlns:x="http://schemas.microsoft.com/
 winfx/2006/xaml"
 Width="700" Height="150"
 Background="White"
 x:Name="Page">
<Path Stroke="green" 
StrokeThickness="3">
<Path.Data>
 <PathGeometry>
  <PathGeometry.Figures>
    <PathFigureCollection>
      <PathFigure 
      StartPoint="25,75" >
        <PathFigure.Segments>
          <PathSegmentCollection>
            <QuadraticBezierSegment 
            Point1="100,25" 
            Point2="175,75" />
</PathSegmentCollection>
         </PathFigure.Segments>
      </PathFigure>
 
        <PathFigure StartPoint=
        "175,75" >
        <PathFigure.Segments>
        <PathSegmentCollection>
          <QuadraticBezierSegment 
             Point1="250,125" 
            Point2="325,75" />
</PathSegmentCollection>
        </PathFigure.Segments>
      </PathFigure>
 
         <PathFigure StartPoint=
         "325,75" >
       <PathFigure.Segments>
        <PathSegmentCollection>
         <QuadraticBezierSegment 
         Point1="400,25" 
          Point2="475,75" />
</PathSegmentCollection>
      </PathFigure.Segments>
    </PathFigure>
 
         <PathFigure StartPoint=
         "475,75" >
      <PathFigure.Segments>
        <PathSegmentCollection>
          <QuadraticBezierSegment 
          Point1="550,125" 
          Point2="625,75" />
</PathSegmentCollection>
       </PathFigure.Segments>
     </PathFigure>
 
   </PathFigureCollection>
 </PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

</Canvas>
Рисование квадратичной кривой Безье при помощи тегов. См. раздел "How to: Create a Quadratic Bezier Curve": http://msdn.microsoft.com/en-us/library/ms752367.aspx А также "How to: Create Multiple Subpaths Within a PathGeometry": http://msdn.microsoft.com/en-us/library/ms742528.aspx
Вид в браузере
< Лекция 2 || Лекция 3: 12345 || Лекция 4 >
Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина