Основы XAML

Объект QuadraticBezierSegment

Квадратическая кривая Безье-это просто кривая Безье, построенная как обычная квадратическая кривая с использованием единственной опорной точки. QuadraticBezierSegment (Сегмент квадратическая кривая Безье) принимает два объекта Point. Если используется только один объект, он становится конечной точкой кривой. В этом случае контрольной точки нет, и кривая принимает форму прямой линии, соединяющей начальную и заданную конечную точки. Если задается две точки, вторая точка принимается за конечную точку кривой, а первая точка становится квадратической опортной точкой. Вот пример:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100">
        <QuadraticBezierSegment Point1 = "200,0" 
                      Point2="300,100" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Кривая, формируемая данным XAML, представлена на рис. 4.22.

Рис. 4.22. Простая квадратическая кривая Безье

Объект PolyQuadraticBezierSegment

Как следует из его имени, PolyQuadraticBezierSegment (Сегмент поликвадратическая кривая Безье) является коллекцией соединенных квадратических кривых Безье, определенных и построенных соответственно списку опорных точек аналогично тому, как это описывалось ранее для объекта PolyBezierSegment. Далее представлен пример PolyQuadraticBezierSegment в действии:

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint=" 100,100">
        <PolyQuadraticBezierSegment
 Points="50,50,150,150,250,250, 100,200,200,100,300,300" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Визуальное представление данного XAML-фрагмента показано на рис. 4.23.

Рис. 4.23. Объект в действии PolyQuadraticBezier

Данный код обеспечивает построение ряда квадратических кривых Безье. Первая строится между начальной точкой, (100,100), и точкой (150,150) с использованием точки (50,50) в качестве опорной, что в результате дает прямую линию, оканчивающуюся в точке (150,150). Вторая кривая начинается в точке (150,150) и заканчивается в точке (100,200) с опорной точкой (250,250). Это сегмент, в котором кривая разворачивается влево. Третья кривая начинается в точке (100,200) и заканчивается в точке (300,300) с опорной точкой (200,100). На рис. 4.23 это длинная сглаженная кривая, идущая слева направо.

Составные сегменты контура

Каждый из рассмотренных типов сегментов может входить в состав сегмента PathFigure. Кроме того, сегменты PathFigure могут собираться в коллекции в рамках PathGeometry для создания сложного набора сегментов.

Далее приведен пример PathGeometry, в состав которого входят два объекта PathFigure. Первый объект содержит LineSegment, PolyQuadraticBezierSegment и еще один LineSegment. Второй объект включает только один LineSegment.

<Path Stroke="Black"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="100,100"> 
        <LineSegment Point="200,200" /> 
        <PolyQuadraticBezierSegment 
          Points="50,50,150,150,250,250,100,200,200,100,300,300" /> 
        <LineSegment Point="0,0" /> 
      </PathFigure> 
      <PathFigure>
        <LineSegment Point="10,400" /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
</Path>

Использование объекта GeometryGroup

В предыдущих разделах были представлены всевозможные геометрические элементы, начиная от самых простых, таких как EllipseGeometry, LineGeometry и RectangleGeometry, до сложных, образованных множеством объектов PathSegment в рамках PathGeometry. Объект GeometryGroup (Группа геометрических элементов) позволяет комбинировать все эти объекты.

Вы просто описываете геометрические элементы, которые хотите включить как коллекцию в этот объект. Далее представлен объект GeometryGroup, содержащий EllipseGeometry, RectangleGeometry, и затем тот же сложный PathGeometry, который использовался в предыдущем разделе:

<Path Stroke="Black"> 
  <Path.Data> 
    <GeometryGroup> 
      <EllipseGeometry RadiusX="100" RadiusY="100" Center="50,50" /> 
      <RectangleGeometry Rect="200,200,100,100" /> 
      <PathGeometry> 
        <PathFigure StartPoint="100,100"> 
          <LineSegment Point="200,200" /> 
          <PolyQuadraticBezierSegment 
            Points="50,50,150,150,250,250,100,200,200,100,300,300" /> 
          <LineSegment Point="0,0" /> 
        </PathFigure> 
        <PathFigure>
          <LineSegment Point="10,400" /> 
        </PathFigure> 
      </PathGeometry> 
    </GeometryGroup> 
  </Path.Data> 
</Path>

Рис. 4-24 представляет, как это будет выглядеть.

Рис. 4.24. Использование объекта GeometryGroup для группировки множества геометрических элементов

Язык описания контуров

Объект Path имеет свойство Data (Данные), в котором может использоваться язык описания контуров для определения сложных контуров. В этом языке используется следующий синтаксис: буква команды, за ней через пробел следует список разделенных запятыми чисел, за которым через пробел идет следующая буква команды. Вот пример:

<Path Stroke="Black" Data="M 100,100 L 200,200" />

В этом экземпляре контур отрисовывается с помощью команды M, обозначающей Move (Перейти), для перехода в точку (100,100) и команды L, обозначающей Line, для построения прямой линии до точки (200,200). Эти команды могут быть заданы либо прописными буквами (например, M ), что свидетельствует о применении абсолютных координат, или строчными буквами (например, m ), что определяет относительные координаты. Команда M помещает перо в заданную точку без отрисовки линии между точкой, в которой он находится в настоящий момент, и заданной точкой; т.е. перо перемещается в начальную точку. Затем будет проведена линия из точки (100,100) в точку (200,200), при условии отсутствия позиционирования родительского холста. Если родительский холст позиционирован, Silverlight отрисует линию относительно его положения.

Команда L (означающая Line) обеспечивает построение прямой линии от текущей точки в заданную.

Команда H принимает в качестве параметра только одно число и отрисовывает горизонтальную прямую между текущей точкой и заданным значением по оси х.

Команда V принимает в качестве параметра только одно число и отрисовывает вертикальную прямую между текущей точкой и заданным значением по оси у.

Команда C принимает в качестве параметров три точки. Она обеспечивает построение кубической кривой Безье между текущей точкой и третьей из заданных точек. Две первые точки используются как опорные.

Команда Q принимает в качестве параметров две точки и отрисовывает квадратическую кривую Безье между текущей точкой и второй из заданных точек. Первая заданная точка используется как опорная.

Команда S принимает в качестве параметров две точки и отрисовывает сглаженную кубическую кривую Безье между текущей точкой и второй из заданных точек. Для формирования сглаженной кривой используется две опорные точки: текущая точка и первый из двух параметров.

Команда T действует аналогично команде S, за исключением того что она обеспечивает построение сглаженной квадратической кривой Безье.

Команда A принимает пять параметров: размер, угол поворота, isLargeArc, sweepDirection и конечную точку. Эти параметры используются для построения эллиптической дуги.

Команда Z завершает текущий контур, проводя прямую линию между текущей точкой и начальной точкой контура и образуя замкнутую фигуру,.