Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Радиальный градиент в WinRT

189
1

Среди многих загадочно отсутствующих компонентов Windows Runtime можно отметить кисть RadialGradientBrush, которая обычно используется для градиентной окраски круга из внутренней точки по направлению к периметру. В частности, радиальный градиент часто применяется для превращения круга в трехмерный «шар», словно область в левом верхнем углу отражает свет.

Я начал писать класс RadialGradientBrushSimulator, ориентируясь на анимацию свойства GradientOrigin этого класса в файле XAML. По этой причине я сделал класс RadialGradientBrushSimulator производным от FrameworkElement, несмотря на то, что он сам по себе ничего не выводит. Наследование от FrameworkElement упростило создание экземпляров класса в XAML. А поскольку я думал об анимациях и привязках, все свойства были определены как свойства зависимости. Следующая часть класса не содержит почти ничего, кроме служебного кода свойств зависимости:

using System;
using System.IO;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace WinRTTestApp
{
    public class RadialGradientBrushSimulator : FrameworkElement
    {
        // ...

        static readonly DependencyProperty innerColorProperty =
                DependencyProperty.Register("InnerColor",
                        typeof(Color),
                        typeof(RadialGradientBrushSimulator),
                        new PropertyMetadata(Colors.White, OnPropertyChanged));

        static readonly DependencyProperty gradientOriginProperty =
                DependencyProperty.Register("GradientOrigin",
                        typeof(Point),
                        typeof(RadialGradientBrushSimulator),
                        new PropertyMetadata(new Point(0.5, 0.5), OnPropertyChanged));

        static readonly DependencyProperty clipToEllipseProperty =
                DependencyProperty.Register("ClipToEllipse",
                        typeof(bool),
                        typeof(RadialGradientBrushSimulator),
                        new PropertyMetadata(false, OnPropertyChanged));

        static readonly DependencyProperty outerColorProperty =
                DependencyProperty.Register("OuterColor",
                        typeof(Color),
                        typeof(RadialGradientBrushSimulator),
                        new PropertyMetadata(Colors.Black, OnPropertyChanged));
        

        public static DependencyProperty imageSourceProperty =
                DependencyProperty.Register("ImageSource",
                        typeof(ImageSource),
                        typeof(RadialGradientBrushSimulator),
                        new PropertyMetadata(null));

        public RadialGradientBrushSimulator()
        {
            SizeChanged += OnSizeChanged;
        }

        public static DependencyProperty InnerColorProperty
        {
            get { return innerColorProperty; }
        }

        public static DependencyProperty GradientOriginProperty
        {
            get { return gradientOriginProperty; }
        }

        public static DependencyProperty OuterColorProperty
        {
            get { return outerColorProperty; }
        }

        public static DependencyProperty ImageSourceProperty
        {
            get { return imageSourceProperty; }
        }

        public static DependencyProperty ClipToEllipseProperty
        {
            get { return clipToEllipseProperty; }
        }

        public Color OuterColor
        {
            set { SetValue(OuterColorProperty, value); }
            get { return (Color)GetValue(OuterColorProperty); }
        }

        public bool ClipToEllipse
        {
            set { SetValue(ClipToEllipseProperty, value); }
            get { return (bool)GetValue(ClipToEllipseProperty); }
        }

        public Point GradientOrigin
        {
            set { SetValue(GradientOriginProperty, value); }
            get { return (Point)GetValue(GradientOriginProperty); }
        }

        public Color InnerColor
        {
            set { SetValue(InnerColorProperty, value); }
            get { return (Color)GetValue(InnerColorProperty); }
        }

        public ImageSource ImageSource
        {
            private set { SetValue(ImageSourceProperty, value); }
            get { return (ImageSource)GetValue(ImageSourceProperty); }
        }

        private void OnSizeChanged(object sender, SizeChangedEventArgs e)
        {
            this.RefreshBitmap();
        }

        static void OnPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
        {
            (obj as RadialGradientBrushSimulator).RefreshBitmap();
        }

        // ...
    }
}

В приведенном ниже методе RefreshBitmap класс использует свойства GradientOrigin, InnerColor, OuterColor и ClipToEllipse (а также свойства ActualWidth и ActualHeight элемента) для создания объекта WriteableBitmap. Класс предоставляет доступ к этому объекту через свойство ImageSource, что позволяет другому элементу в файле XAML ссылаться на него через привязку к свойству ImageSource объекта ImageBrush.

Потом выяснилось, что алгоритм построения радиальной градиентной кисти не так уж тривиален. На концептуальном уровне вы работаете с эллипсом, хотя растровое изображение может использоваться для окраски прямоугольника и вообще чего угодно. Цвет на границе эллипса определяется свойством OuterColor. Свойство GradientOrigin типа Point задается в относительных координатах. Например, значение (0.5,0.5) устанавливает GradientOrigin в центр эллипса. Цвет в точке GradientOrigin задается свойством InnerColor.

Для любой точки (x, y) внутри изображения алгоритм должен определить коэффициент интерполяции для вычисления цвета из диапазона между InnerColor и OuterColor. Коэффициент интерполяции вычисляется по отрезку прямой из точки GradientOrigin через точку (x, y) к контуру эллипса. Пропорция, в которой (x, y) делит этот отрезок, определяет значение коэффициента интерполяции. Чтобы добиться лучшей производительности, я решил обойтись без тригонометрии. Вместо этого моя стратегия была основана на определении точки пересечения контура эллипса с линией, соединяющей GradientOrigin с (x, y). Это требовало решения квадратного уравнения для каждой точки растрового изображения.

Метод RefreshBitmap выглядит так:

// ...

namespace WinRTTestApp
{
    public class RadialGradientBrushSimulator : FrameworkElement
    {
        byte[] pixels;
        WriteableBitmap bitmap;
        Stream pixelStream;

        // ...

        private void RefreshBitmap()
        {
            if (this.ActualWidth == 0 || this.ActualHeight == 0)
            {
                this.ImageSource = null;
                pixelStream = null;
                pixels = null;
                bitmap = null;
                return;
            }

            if (bitmap == null || (int)this.ActualWidth != bitmap.PixelWidth ||
                                  (int)this.ActualHeight != bitmap.PixelHeight)
            {
                bitmap = new WriteableBitmap((int)this.ActualWidth, (int)this.ActualHeight);
                this.ImageSource = bitmap;
                pixels = new byte[4 * bitmap.PixelWidth * bitmap.PixelHeight];
                pixelStream = bitmap.PixelBuffer.AsStream();
            }
            else
            {
                for (int i = 0; i < pixels.Length; i++)
                    pixels[i] = 0;
            }

            double yOrigin = 2 * this.GradientOrigin.Y - 1;
            double xOrigin = 2 * this.GradientOrigin.X - 1;

            byte aOutsideCircle = 0;
            byte rOutsideCircle = 0;
            byte gOutsideCircle = 0;
            byte bOutsideCircle = 0;

            if (!this.ClipToEllipse)
            {
                double opacity = this.OuterColor.A / 255.0;
                aOutsideCircle = this.OuterColor.A;
                rOutsideCircle = (byte)(opacity * this.OuterColor.R);
                gOutsideCircle = (byte)(opacity * this.OuterColor.G);
                gOutsideCircle = (byte)(opacity * this.OuterColor.B);
            }

            int index = 0;

            for (int yPixel = 0; yPixel < bitmap.PixelHeight; yPixel++)
            {
                // Вычисление y относительно единичного круга
                double y = 2.0 * yPixel / bitmap.PixelHeight - 1;

                for (int xPixel = 0; xPixel < bitmap.PixelWidth; xPixel++)
                {
                    // Вычисление x относительно единичного круга
                    double x = 2.0 * xPixel / bitmap.PixelWidth - 1;

                    // Проверяем, находится ли точка внутри круга
                    if (x * x + y * y <= 1)
                    {
                        // Относительная длина отрезка от центра градиента до точки
                        double length1 = 0;

                        // Относительная длина отрезка от точки до единичного круга
                        //  (length1 + length2 = 1)
                        double length2 = 0;

                        if (x == xOrigin && y == yOrigin)
                        {
                            length2 = 1;
                        }
                        else
                        {
                            // Известно, что: xCircle^2 + yCircle^2 = 1
                            double xCircle = 0, yCircle = 0;

                            if (x == xOrigin)
                            {
                                xCircle = x;
                                yCircle = (y < yOrigin ? -1 : 1) * Math.Sqrt(1 - x * x);
                            }
                            else if (y == yOrigin)
                            {
                                xCircle = (x < xOrigin ? -1 : 1) * Math.Sqrt(1 - y * y);
                                yCircle = y;
                            }
                            else
                            {
                                // Линия от центра градиента до точки выражается в форме y = mx + k
                                double m = (yOrigin - y) / (xOrigin - x);
                                double k = y - m * x;

                                // Представляем (mx + k) вместо y в x^2 + y^2 = 1
                                // x^2 + (mx + k)^2 = 1
                                // x^2 + (mx)^2 + 2mxk + k^2 - 1 = 0
                                // (1 + m^2)x^2 + (2mk)x + (k^2 - 1) = 0 это квадратное уравнение
                                double a = 1 + m * m;
                                double b = 2 * m * k;
                                double c = k * k - 1;

                                // Теперь решаем для x
                                double sqrtTerm = Math.Sqrt(b * b - 4 * a * c);
                                double x1 = (-b + sqrtTerm) / (2 * a);
                                double x2 = (-b - sqrtTerm) / (2 * a);

                                if (x < xOrigin)
                                    xCircle = Math.Min(x1, x2);
                                else
                                    xCircle = Math.Max(x1, x2);

                                yCircle = m * xCircle + k;
                            }

                            // Длина отрезка от центра градиента до точки
                            length1 = Math.Sqrt(Math.Pow(x - xOrigin, 2) + Math.Pow(y - yOrigin, 2));

                            // Длина отрезка от точки до контура
                            length2 = Math.Sqrt(Math.Pow(x - xCircle, 2) + Math.Pow(y - yCircle, 2));

                            // Нормализация длин
                            double total = length1 + length2;
                            length1 /= total;
                            length2 /= total;
                        }

                        // Интерполяция цвета
                        double alpha = length2 * this.InnerColor.A + length1 * this.OuterColor.A;
                        double green = alpha * (length2 * this.InnerColor.G +
                                                length1 * this.OuterColor.G) / 255;
                        double red = alpha * (length2 * this.InnerColor.R +
                                             length1 * this.OuterColor.R) / 255;
                        
                        double blue = alpha * (length2 * this.InnerColor.B +
                                               length1 * this.OuterColor.B) / 255;

                        // Сохранить в массив
                        pixels[index++] = (byte)blue;
                        pixels[index++] = (byte)green;
                        pixels[index++] = (byte)red;
                        pixels[index++] = (byte)alpha;
                    }
                    else
                    {
                        pixels[index++] = bOutsideCircle;
                        pixels[index++] = gOutsideCircle;
                        pixels[index++] = rOutsideCircle;
                        pixels[index++] = aOutsideCircle;
                    }
                }
            }
            pixelStream.Seek(0, SeekOrigin.Begin);
            pixelStream.Write(pixels, 0, pixels.Length);
            bitmap.Invalidate();
        }
    }
}

Так как программа ориентирована на анимацию, массив пикселов и объект Stream, используемый для передачи пикселов в изображение, сохраняются в полях. В методе RefreshBitmap выделения памяти из кучи не нужны, если только объект WriteableBitmap не потребуется создавать заново из-за изменения размера элемента.

Но производительность анимации оказалась крайне низкой даже с относительно малыми размерами изображения. Но если удастся избежать анимации самого градиента, ничто не мешает применить анимацию к окрашиваемому объекту. Файл MainPage.xaml создает экземпляры RadialGradientBrushSimulator и Ellipse с привязкой к эмулятору кисти, а также пару анимаций:

<Page ...>

    <Grid Background="#FF1D1D1D">
        <Canvas SizeChanged="Canvas_SizeChanged"
                Margin="0 0 94 94">

            <Grid Name="ballContainer"
                  Width="94"
                  Height="94">

                <Ellipse Name="ellipse">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="{Binding ElementName=brushSimulator, 
                                                          Path=ImageSource}" />
                    </Ellipse.Fill>
                </Ellipse>

                <local:RadialGradientBrushSimulator x:Name="brushSimulator"
                                                    InnerColor="White"
                                                    OuterColor="Red"
                                                    GradientOrigin="0.3 0.3" />
            </Grid>
        </Canvas>
    </Grid>

    <Page.Triggers>
        <EventTrigger>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation x:Name="leftAnimation"
                                      From="0" Duration="0:0:2.51"
                                     Storyboard.TargetName="ballContainer"
                                     Storyboard.TargetProperty="(Canvas.Left)"
                                    
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                    <DoubleAnimation x:Name="rightAnimation"
                                     Storyboard.TargetName="ballContainer"
                                     Storyboard.TargetProperty="(Canvas.Top)"
                                     From="0" Duration="0:0:1.01"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Page.Triggers>
</Page>

Обратите внимание на размещение Ellipse и RadialGradientBrushSimulator в одной квадратной панели Grid с размером 94 пикселов, чтобы оба элемента имели одинаковый размер, а размер генерируемого изображения точно соответствовал размеру окрашиваемого объекта Ellipse. Файл фонового кода просто настраивает значения To анимаций в зависимости от размера Canvas:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace WinRTTestApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            // Анимация Canvas.Left
            leftAnimation.To = e.NewSize.Width;

            // Анимация Canvas.Top 
            rightAnimation.To = e.NewSize.Height;
        }
    }
}

С имитацией отраженного света объект Ellipse чуть больше напоминает объект реального мира:

Эмуляция радиального градиента в Windows Runtime
Пройди тесты