RadialGradientBrush

WPF --- Графика и анимация WPF --- RadialGradientBrush

Кисть RadialGradientBrush работает подобно LinearGradientBrush. Она также принимает последовательность цветов с разными смещениями. Как и в случае с LinearGradientBrush, можно указывать произвольное количество цветов. Отличие состоит в том, как размещается градиент.

Для идентификации точки, с которой начинается первый цвет градиента, служит свойство GradientOrigin. По умолчанию оно хранит координату (0.5, 0.5), представляющую середину заполняемой области.

Как и LinearGradientBrush, кисть RadialGradientBrush использует пропорциональную систему координат, в которой левый верхний угол области заполнения имеет координату (0,0), а нижний правый угол — (1,1). Это означает, что для размещения центральной точки градиента можно указать любую координату от (0,0) до (1,1). Фактически можно даже выйти за эти пределы и указать стартовую точку вне заполняемой области.

Градиент распространяется из начальной точки в радиальном направлении. В конечном итоге он достигает границы внутреннего круга градиента, где завершается. Центр этого круга может совпадать или не совпадать с центром градиента, в зависимости от требуемого эффекта. Область за пределами границы внутреннего круга градиента заполняется последним цветом, определенным в коллекции RadialGradientBrush.GradientStops.

Граница внутреннего круга градиента задается тремя свойствами: Center, RadiusX и RadiusY. По умолчанию свойство Center равно (0.5, 0.5), что помещает центр ограничивающего круга в центр заполняемой области, в точку, совпадающую с началом градиента.

Свойства RadiusX и RadiusY определяют размер ограничивающего круга и по умолчанию оба равны 0.5. Эти значения могут быть несколько непонятными — они измеряются относительно диагонали области заполнения (длины воображаемой линии, соединяющей левый верхний угол области заполнения с правым нижним). Это значит, что значение 0.5 описывает круг, радиус которого составляет половину диагонали. Если область заполнения имеет квадратную форму, то, применив теорему Пифагора, можно определить, что это составит примерно около 0.7 от ширины (или высоты) области.

Таким образом, в случае заполнения квадратной области с установками по умолчанию градиент начинается в центре и простирается по радиусу примерно на 0,7 от стороны квадрата.

Если вы представите максимально возможный эллипс, который вписывается в область, то это и будет область, где градиент завершается вторым цветом.

Заполнение радиальным градиентом — хороший выбор для окраски округлых фигур и создания световых эффектов. (Опытные дизайнеры графики используют комбинацию градиентов для создания кнопок с эффектом свечения.) Распространенный трюк заключается в небольшом смещении точки GradientOrigin для создания иллюзии глубины фигуры. Ниже приведен пример:

<Ellipse Margin="5" Stretch="Uniform">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="White" Offset="0"></GradientStop>
                            <GradientStop Color="Orange" Offset="1"></GradientStop>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Margin="5" Stretch="Uniform" Grid.Row="1">
                    <Ellipse.Fill>
                        <RadialGradientBrush GradientOrigin="0.75,0.25">
                            <GradientStop Color="White" Offset="0"></GradientStop>
                            <GradientStop Color="Orange" Offset="1"></GradientStop>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
</Ellipse>