Графика и анимация

Графика

Avalonia представляет обширный, масштабируемый и гибкий набор графических функций, которые имеют следующие преимущества:

• Графика, независимая от разрешения и устройства. Базовой единицей измерения в графической системе Avalonia является независимый от устройства пиксель, который составляет 1/96 дюйма, независимо от фактического разрешения экрана, и обеспечивает основу для независимого от разрешения и устройства рендеринга. Каждый аппаратно-независимый пиксель автоматически масштабируется в соответствии с настройкой количества точек на дюйм (dpi) системы, в которой он отображается.
• Улучшенная точность. Система координат Авалонии измеряется числами с плавающей запятой двойной точности, а не одинарной. Преобразования и значения непрозрачности также выражаются с двойной точностью.
• Расширенная поддержка графики и анимации. Avalonia упрощает программирование графики, управляя анимационными сценами за вас; не нужно беспокоиться об обработке сцены, циклах рендеринга и билинейной интерполяции. Кроме того, Avalonia обеспечивает поддержку тестирования попаданий и полную поддержку альфа-компоновки.
• Скиа. По умолчанию Avalonia использует механизм рендеринга Skia, тот же механизм рендеринга, который используется в Google Chrome и Chrome OS, Android, Mozilla Firefox и Firefox OS, а также во многих других продуктах.

2D-формы и геометрия

Avalonia предоставляет библиотеку распространенных векторных 2D-фигур, таких как эллипс, линия, путь, многоугольник и прямоугольник.

<Canvas Background="Yellow" Width="300" Height="400">
    <Rectangle Fill="Blue" Width="63" Height="41" Canvas.Left="40" Canvas.Top="31">
        <Rectangle.OpacityMask>
            <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0" Color="Black"/>
                    <GradientStop Offset="1" Color="Transparent"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Rectangle.OpacityMask>     
    </Rectangle>
    <Ellipse Fill="Green" Width="58" Height="58" Canvas.Left="88" Canvas.Top="100"/>
    <Path Fill="Orange" Data="M 0,0 c 0,0 50,0 50,-50 c 0,0 50,0 50,50 h -50 v 50 l -50,-50 Z" Canvas.Left="30" Canvas.Top="250"/>
    <Path Fill="OrangeRed" Canvas.Left="180" Canvas.Top="250">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,0" IsClosed="True">
                    <QuadraticBezierSegment Point1="50,0" Point2="50,-50" />
                    <QuadraticBezierSegment Point1="100,-50" Point2="100,0" />
                    <LineSegment Point="50,0" />
                    <LineSegment Point="50,50" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Line StartPoint="120,185" EndPoint="30,115" Stroke="Red" StrokeThickness="2"/>
    <Polygon Points="75,0 120,120 0,45 150,45 30,120" Stroke="DarkBlue" StrokeThickness="1" Fill="Violet" Canvas.Left="150" Canvas.Top="31"/>
    <Polyline Points="0,0 65,0 78,-26 91,39 104,-39 117,13 130,0 195,0" Stroke="Brown" Canvas.Left="30" Canvas.Top="350"/>
</Canvas>

Анимация

Поддержка анимации в Avalonia позволяет увеличивать (grow), трясти (shake), вращать (spin) и исчезать (fade) элементы управления, создавать интересные переходы между страницами и многое другое. Avalonia использует подобную CSS систему анимации, которая поддерживает переходы свойств и анимацию ключевых кадров.