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

Xamarin.Forms Фигуры: преобразования пути

  • Статья

Определяет Transform , как преобразовать Path объект из одного пространства координат в другое пространство координат. При применении преобразования к Path объекту он изменяет способ отрисовки объекта в пользовательском интерфейсе.

Преобразования можно разделить на четыре общие классификации: поворот, масштабирование, отклонение и перевод. Xamarin.Forms определяет класс для каждой из этих классификаций преобразований:

  • RotateTransform, который поворачивает Path заданный Angleобъект.
  • ScaleTransform, который масштабирует Path объект по указанным ScaleX и ScaleY суммам.
  • SkewTransform, который искажает Path объект по указанным AngleX и AngleY суммам.
  • TranslateTransform, который перемещает Path объект по указанным X и Y суммам.

Xamarin.Forms также предоставляет следующие классы для создания более сложных преобразований:

  • TransformGroup, представляющий составное преобразование, состоящее из нескольких объектов преобразования.
  • CompositeTransform, который применяет несколько операций преобразования к объекту Path .
  • MatrixTransform, который создает пользовательские преобразования, которые не предоставляются другими классами преобразования.

Все эти классы являются производными от Transform класса, который определяет Value свойство типа Matrix, представляющее текущее преобразование как Matrix объект. Это свойство поддерживается BindableProperty объектом, что означает, что он может быть целевым объектом привязок данных и стилем. Дополнительные сведения о структуре см. в Matrix таблице преобразования.

Чтобы применить преобразование к Pathобъекту, создайте класс преобразования и задайте его в качестве значения Path.RenderTransform свойства.

Преобразование поворота

Преобразование поворота поворачивает объект по часовой Path стрелке по заданной точке в 2D-системе координат x-y.

Класс RotateTransform , производный от Transform класса, определяет следующие свойства:

  • Angledoubleтип , представляет угол в градусах поворота по часовой стрелке. Значение по умолчанию этого свойства равно 0.0.
  • CenterXdoubleтип , представляет координату x центра поворота. Значение по умолчанию этого свойства равно 0.0.
  • CenterYdoubleтип , представляет координату y центра поворота. Значение по умолчанию этого свойства равно 0.0.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

CenterY Свойства CenterX указывают точку поворота Path объекта. Эта центральная точка выражается в пространстве координат объекта, преобразованного. По умолчанию поворот применяется к (0,0), который является левым верхним углом Path объекта.

В следующем примере показано, как повернуть Path объект:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <RotateTransform CenterX="0"
                         CenterY="0"
                         Angle="45" />
    </Path.RenderTransform>
</Path>

В этом примере Path объект поворачивается на 45 градусов в левом верхнем углу.

Преобразование масштабирования

Преобразование масштабирования масштабирует Path объект в системе координат 2D x-y.

Класс ScaleTransform , производный от Transform класса, определяет следующие свойства:

  • ScaleXтип, представляющий коэффициент масштабирования doubleоси x. Значение по умолчанию этого свойства — 1.0.
  • ScaleYdoubleтип, представляющий коэффициент масштабирования оси Y. Значение по умолчанию этого свойства — 1.0.
  • CenterXdoubleтип, представляющий координату x центра этого преобразования. Значение по умолчанию этого свойства равно 0.0.
  • CenterYтипа double, который представляет координату y центра этого преобразования. Значение по умолчанию этого свойства равно 0.0.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Значение ScaleX и ScaleY огромное влияние на результирующее масштабирование:

  • Значения от 0 до 1 снижают ширину и высоту масштабируемого объекта.
  • Значения, превышающие 1, увеличивают ширину и высоту масштабируемого объекта.
  • Значения 1 указывают, что объект не масштабируется.
  • Отрицательные значения переворачивают объект масштабирования по горизонтали и вертикали.
  • Значения от 0 до -1 переворачивали объект масштабирования и уменьшали ее ширину и высоту.
  • Значения меньше -1 переворачивайте объект и увеличивайте ее ширину и высоту.
  • Значения -1 переворачивайте масштабируемый объект, но не изменяйте его горизонтальный или вертикальный размер.

CenterY Свойства CenterX указывают точку, о которой Path масштабируется объект. Эта центральная точка выражается в пространстве координат объекта, преобразованного. По умолчанию масштабирование применяется к (0,0), который является левым верхним углом Path объекта. Это влияет на перемещение Path объекта и его увеличение, так как при применении преобразования изменяется пространство координат, в котором Path находится объект.

В следующем примере показано, как масштабировать Path объект:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <ScaleTransform CenterX="0"
                        CenterY="0"
                        ScaleX="1.5"
                        ScaleY="1.5" />
    </Path.RenderTransform>
</Path>

В этом примере Path объект масштабируется до 1,5 раза больше.

Преобразование с отклонением

Преобразование с размыкания изменяет Path объект в системе координат 2D x-y и полезен для создания иллюзии трехмерной глубины в 2D-объекте.

Класс SkewTransform , производный от Transform класса, определяет следующие свойства:

  • AngleX, тип double, представляющий угол разбиения оси x, который измеряется в градусах по счетчику с оси Y. Значение по умолчанию этого свойства равно 0.0.
  • AngleYdoubleтип, представляющий угол ось Y, измеряемый в градусах по счетчику с оси x. Значение по умолчанию этого свойства равно 0.0.
  • CenterXтип double, представляющий координату x центра преобразования. Значение по умолчанию этого свойства равно 0.0.
  • CenterYdoubleтип, представляющий координату y центра преобразования. Значение по умолчанию этого свойства равно 0.0.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Чтобы спрогнозировать результат отклонения, учтите, что AngleX отклоняет значения оси X относительно исходной системы координат. Таким образом, для AngleX 30 ось Y поворачивается на 30 градусов через источник и перемежает значения в x на 30 градусов от этого источника. Аналогичным образом, AngleY 30 размыкает значения Path y объекта на 30 градусов от источника.

Примечание.

Чтобы сместить Path объект на месте, задайте CenterX для центральной точки объекта и CenterY свойства.

В следующем примере показано, как спрясти Path объект:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <SkewTransform CenterX="0"
                       CenterY="0"
                       AngleX="45"
                       AngleY="0" />
    </Path.RenderTransform>
</Path>

В этом примере горизонтальное отклонение от 45 градусов применяется к Path объекту в центре (0,0).

Преобразование перевода

Преобразование перевода перемещает объект в системе координат x-y 2D.

Класс TranslateTransform , производный от Transform класса, определяет следующие свойства:

  • Xтипа double, который представляет расстояние для перемещения по оси X. Значение по умолчанию этого свойства равно 0.0.
  • Yтип double, представляющий расстояние для перемещения по оси Y. Значение по умолчанию этого свойства равно 0.0.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Отрицательные X значения перемещают объект слева, а положительные значения перемещают объект справа. Отрицательные Y значения перемещают объект вверх, а положительные значения перемещают объект вниз.

В следующем примере показано, как преобразовать Path объект:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TranslateTransform X="50"
                            Y="50" />
    </Path.RenderTransform>
</Path>

В этом примере Path объект перемещается 50 независимых от устройств единиц вправо и 50 независимых от устройств единиц вниз.

Несколько преобразований

Xamarin.Forms имеет два класса, которые поддерживают применение нескольких преобразований к объекту Path . TransformGroupЭто и CompositeTransform. Преобразование TransformGroup выполняется в любом требуемом порядке, в то время как CompositeTransform выполняет преобразования в определенном порядке.

Преобразование групп

Группы преобразования представляют составные преобразования, состоящие из нескольких Transform объектов.

Класс TransformGroup , производный от Transform класса, определяет Children свойство типа TransformCollection, представляющее коллекцию Transform объектов. Это свойство поддерживается BindableProperty объектом, что означает, что он может быть целевым объектом привязок данных и стилем.

Порядок преобразований важен в составном преобразовании, использующего TransformGroup класс. Например, если применяется поворот, затем масштабирование, а затем сдвиг, получается совершенно иной результат, чем если бы сначала был применен сдвиг, затем поворот, а затем масштабирование. Один из причин является значительным, что преобразования, такие как поворот и масштабирование, выполняются в отношении происхождения системы координат. Масштабирование объекта, центрированного в источнике, создает другой результат масштабирования объекта, который был удален из источника. Аналогично, поворот объекта, центрированного по началу координат, дает другой результат, чем поворот объекта, который куда-либо сдвинут относительно этой точки.

В следующем примере показано, как выполнить составное преобразование с помощью TransformGroup класса:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1.5"
                            ScaleY="1.5" />
            <RotateTransform Angle="45" />
        </TransformGroup>
    </Path.RenderTransform>
</Path>

В этом примере Path объект масштабируется до 1,5 раза, а затем поворачивается на 45 градусов.

Составные преобразования

Составное преобразование применяет несколько преобразований к объекту.

Класс CompositeTransform , производный от Transform класса, определяет следующие свойства:

  • CenterXdoubleтип, представляющий координату x центра этого преобразования. Значение по умолчанию этого свойства равно 0.0.
  • CenterYтипа double, который представляет координату y центра этого преобразования. Значение по умолчанию этого свойства равно 0.0.
  • ScaleXтип, представляющий коэффициент масштабирования doubleоси x. Значение по умолчанию этого свойства — 1.0.
  • ScaleYdoubleтип, представляющий коэффициент масштабирования оси Y. Значение по умолчанию этого свойства — 1.0.
  • SkewX, тип double, представляющий угол разбиения оси x, который измеряется в градусах по счетчику с оси Y. Значение по умолчанию этого свойства равно 0.0.
  • SkewYdoubleтип, представляющий угол ось Y, измеряемый в градусах по счетчику с оси x. Значение по умолчанию этого свойства равно 0.0.
  • Rotationdoubleтип , представляет угол в градусах поворота по часовой стрелке. Значение по умолчанию этого свойства равно 0.0.
  • TranslateXтипа double, который представляет расстояние для перемещения по оси X. Значение по умолчанию этого свойства равно 0.0.
  • TranslateYтип double, представляющий расстояние для перемещения по оси Y. Значение по умолчанию этого свойства равно 0.0.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

В CompositeTransform этом порядке применяются преобразования:

  1. Масштабирование (ScaleX и ScaleY).
  2. Отклонение (SkewX и SkewY).
  3. Поворот (Rotation).
  4. Перевод (TranslateX, TranslateY).

Если вы хотите применить несколько преобразований к объекту в другом порядке, необходимо создать TransformGroup и вставить преобразования в предполагаемом порядке.

Внимание

Для всех преобразований используется CompositeTransform одна и та же центральная точка CenterX CenterY. Если вы хотите указать разные центральные точки для преобразования, используйте < a0/> TransformGroup.

В следующем примере показано, как выполнить составное преобразование с помощью CompositeTransform класса:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <CompositeTransform ScaleX="1.5"
                            ScaleY="1.5"
                            Rotation="45"
                            TranslateX="50"
                            TranslateY="50" />
    </Path.RenderTransform>
</Path>

В этом примере Path объект масштабируется до 1,5 раза, а затем поворачивается на 45 градусов, а затем преобразуется на 50 единиц, независимых от устройства.

Матрица преобразования

Преобразование можно описать с точки зрения матрицы аффинного преобразования 3x3, которая выполняет преобразования в 2D-пространстве. Эта матрица 3x3 представлена Matrix структурой, которая представляет собой коллекцию трех строк и трех столбцов значений double .

Структуру Matrix определяются следующие свойства:

  • Determinantdoubleтипа, который получает детерминант матрицы.
  • HasInverse, тип bool, указывающий, является ли матрица непредвернутой.
  • Identity, тип Matrix, который получает матрицу удостоверений.
  • HasIdentityтип bool, указывающий, является ли матрица матрицей удостоверений.
  • M11doubleтип, представляющий значение первой строки и первого столбца матрицы.
  • M12тип double, представляющий значение первой строки и второго столбца матрицы.
  • M21тип double, представляющий значение второй строки и первого столбца матрицы.
  • M22doubleтип, представляющий значение второй строки и второго столбца матрицы.
  • OffsetXтип double, представляющий значение третьей строки и первого столбца матрицы.
  • OffsetYdoubleтип, представляющий значение третьей строки и второго столбца матрицы.

Свойства OffsetX OffsetY называются так, так как они указывают объем для преобразования пространства координат вдоль оси x и оси Y соответственно.

Кроме того, структуру Matrix предоставляет ряд методов, которые можно использовать для управления значениями матриц, включая Append, InvertMultiplyPrepend и многое другое.

В следующей таблице показана структура матрицы Xamarin.Forms :

M11

M12

0,0

M21

M22

0,0

OffsetX

OffsetY

1.0

Примечание.

Матрица аффинного преобразования имеет конечный столбец равным (0,0,1), поэтому необходимо указать только элементы в первых двух столбцах.

С помощью управления значениями матрицы можно повернуть, масштабировать, перекосить и перевести Path объекты. Например, если изменить OffsetX значение на 100, его можно переместить Path на 100 единиц, независимых от устройства, вдоль оси x. Если изменить M22 значение на 3, его можно использовать для растяжения объекта в три раза больше текущей Path высоты. При изменении обоих значений перемещается Path объект 100 независимых от устройств единиц вдоль оси x и растяжения высоты на 3. Кроме того, матрицы аффинного преобразования можно умножить, чтобы сформировать любое количество линейных преобразований, таких как поворот и отклонение, за которым следует перевод.

Пользовательские преобразования

Класс MatrixTransform , производный от Transform класса, определяет Matrix свойство типа Matrix, представляющее матрицу, определяющую преобразование. Это свойство поддерживается BindableProperty объектом, что означает, что он может быть целевым объектом привязок данных и стилем.

Любое преобразование, которое можно описать с TranslateTransformпомощью объекта , RotateTransformScaleTransformили SkewTransform объекта, можно описать равным образомMatrixTransform. Тем не менее, ScaleTransformTranslateTransformRotateTransformклассы и SkewTransform классы проще концептуальны, чем задать компоненты векторов в объектеMatrix. MatrixTransform Поэтому класс обычно используется для создания пользовательских преобразований, которые не предоставляются классами RotateTransform, ScaleTransformSkewTransformили TranslateTransform классами.

В следующем примере показано, как преобразовать Path объект с помощью MatrixTransform:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform>
            <MatrixTransform.Matrix>
                <!-- M11 stretches, M12 skews -->
                <Matrix OffsetX="10"
                        OffsetY="100"
                        M11="1.5"
                        M12="1" />
            </MatrixTransform.Matrix>
        </MatrixTransform>
    </Path.RenderTransform>
</Path>

В этом примере Path объект растянут, смещен и смещение в измерениях X и Y.

Кроме того, это можно написать в упрощенной форме, которая использует преобразователь типов, встроенный в Xamarin.Forms:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform Matrix="1.5,1,0,1,10,100" />
    </Path.RenderTransform>
</Path>

В этом примере Matrix свойство указывается как строка с разделителями-запятыми, состоящая из шести членов: M11, , M12M21, M22, . OffsetYOffsetX Хотя члены разделены запятыми в этом примере, они также могут быть разделены одним или несколькими пробелами.

Кроме того, предыдущий пример можно упростить, указав те же шесть элементов, что и значение RenderTransform свойства:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      RenderTransform="1.5 1 0 1 10 100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z" />