Struct AngularColorStop 

pub struct AngularColorStop {
    pub color: Color,
    pub angle: Option<f32>,
    pub hint: f32,
}

An angular color stop for a conic gradient

Fields

color: Color

Color of the stop

angle: Option<f32>

The angle of the stop. Angles are relative to the start of the gradient and not other stops. If set to None the angle of the stop will be interpolated between the explicit stops or 0 and 2 PI degrees if there no explicit stops. Given angles are clamped to between 0., and TAU. This means that a list of stops:

let stops = [
    AngularColorStop::new(Color::WHITE, 0.),
    AngularColorStop::new(Color::BLACK, -1.),
    AngularColorStop::new(RED, 2. * TAU),
    AngularColorStop::new(BLUE, TAU),
];

is equivalent to:

let stops = [
    AngularColorStop::new(Color::WHITE, 0.),
    AngularColorStop::new(Color::BLACK, 0.),
    AngularColorStop::new(RED, TAU),
    AngularColorStop::new(BLUE, TAU),
];

Resulting in a black to red gradient, not white to blue.

hint: f32

Normalized angle between this and the following stop of the interpolation midpoint.

Implementations

impl AngularColorStop

pub fn new(color: impl Into<Color>, angle: f32) -> AngularColorStop

pub fn auto(color: impl Into<Color>) -> AngularColorStop

An angular stop without an explicit angle. The angles of automatic stops are interpolated evenly between explicit stops.

Examples found in repository

examples/ui/styling/stacked_gradients.rs (line 49)

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    commands
        .spawn(Node {
            display: Display::Grid,
            width: percent(100),
            height: percent(100),

            ..Default::default()
        })
        .with_children(|commands| {
            commands.spawn((
                Node {
                    width: percent(100),
                    height: percent(100),
                    ..Default::default()
                },
                BackgroundColor(Color::BLACK),
                BackgroundGradient(vec![
                    LinearGradient::to_top_right(vec![
                        ColorStop::auto(RED),
                        ColorStop::auto(RED.with_alpha(0.)),
                    ])
                    .into(),
                    LinearGradient::to_top_left(vec![
                        ColorStop::auto(BLUE),
                        ColorStop::auto(BLUE.with_alpha(0.)),
                    ])
                    .into(),
                    ConicGradient {
                        start: 0.,
                        position: UiPosition::CENTER,
                        stops: vec![
                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
                            AngularColorStop::auto(YELLOW),
                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
                        ],
                        ..Default::default()
                    }
                    .into(),
                    RadialGradient {
                        position: UiPosition::TOP.at_x(percent(5)),
                        shape: RadialGradientShape::Circle(vh(30)),
                        stops: vec![
                            ColorStop::auto(Color::WHITE),
                            ColorStop::auto(YELLOW),
                            ColorStop::auto(YELLOW.with_alpha(0.1)),
                            ColorStop::auto(YELLOW.with_alpha(0.)),
                        ],
                        ..Default::default()
                    }
                    .into(),
                    LinearGradient {
                        angle: TAU / 16.,
                        stops: vec![
                            ColorStop::auto(Color::BLACK),
                            ColorStop::auto(Color::BLACK.with_alpha(0.)),
                        ],
                        ..Default::default()
                    }
                    .into(),
                    LinearGradient {
                        angle: 15. * TAU / 16.,
                        stops: vec![
                            ColorStop::auto(Color::BLACK),
                            ColorStop::auto(Color::BLACK.with_alpha(0.)),
                        ],
                        ..Default::default()
                    }
                    .into(),
                ]),
            ));
        });
}

examples/ui/styling/gradients.rs (line 169)

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);

    commands
        .spawn(Node {
            flex_direction: FlexDirection::Column,
            row_gap: px(20),
            margin: UiRect::all(px(20)),
            ..Default::default()
        })
        .with_children(|commands| {
            for (b, stops) in [
                (
                    4.,
                    vec![
                        ColorStop::new(Color::WHITE, percent(15)),
                        ColorStop::new(Color::BLACK, percent(85)),
                    ],
                ),
                (4., vec![RED.into(), BLUE.into(), LIME.into()]),
                (
                    0.,
                    vec![
                        RED.into(),
                        ColorStop::new(RED, percent(100. / 7.)),
                        ColorStop::new(ORANGE, percent(100. / 7.)),
                        ColorStop::new(ORANGE, percent(200. / 7.)),
                        ColorStop::new(YELLOW, percent(200. / 7.)),
                        ColorStop::new(YELLOW, percent(300. / 7.)),
                        ColorStop::new(GREEN, percent(300. / 7.)),
                        ColorStop::new(GREEN, percent(400. / 7.)),
                        ColorStop::new(BLUE, percent(400. / 7.)),
                        ColorStop::new(BLUE, percent(500. / 7.)),
                        ColorStop::new(INDIGO, percent(500. / 7.)),
                        ColorStop::new(INDIGO, percent(600. / 7.)),
                        ColorStop::new(VIOLET, percent(600. / 7.)),
                        VIOLET.into(),
                    ],
                ),
            ] {
                commands.spawn(Node::default()).with_children(|commands| {
                    commands
                        .spawn(Node {
                            flex_direction: FlexDirection::Column,
                            row_gap: px(5),
                            ..Default::default()
                        })
                        .with_children(|commands| {
                            for (w, h) in [(70., 70.), (35., 70.), (70., 35.)] {
                                commands
                                    .spawn(Node {
                                        column_gap: px(10),
                                        ..Default::default()
                                    })
                                    .with_children(|commands| {
                                        for angle in (0..8).map(|i| i as f32 * TAU / 8.) {
                                            commands.spawn((
                                                Node {
                                                    width: px(w),
                                                    height: px(h),
                                                    border: UiRect::all(px(b)),
                                                    border_radius: BorderRadius::all(px(20)),
                                                    ..default()
                                                },
                                                BackgroundGradient::from(LinearGradient {
                                                    angle,
                                                    stops: stops.clone(),
                                                    ..default()
                                                }),
                                                BorderGradient::from(LinearGradient {
                                                    angle: 3. * TAU / 8.,
                                                    stops: vec![
                                                        YELLOW.into(),
                                                        Color::WHITE.into(),
                                                        ORANGE.into(),
                                                    ],
                                                    ..default()
                                                }),
                                            ));
                                        }
                                    });
                            }
                        });

                    commands.spawn(Node::default()).with_children(|commands| {
                        commands.spawn((
                            Node {
                                aspect_ratio: Some(1.),
                                height: percent(100),
                                border: UiRect::all(px(b)),
                                margin: UiRect::left(px(20)),
                                border_radius: BorderRadius::all(px(20)),
                                ..default()
                            },
                            BackgroundGradient::from(LinearGradient {
                                angle: 0.,
                                stops: stops.clone(),
                                ..default()
                            }),
                            BorderGradient::from(LinearGradient {
                                angle: 3. * TAU / 8.,
                                stops: vec![YELLOW.into(), Color::WHITE.into(), ORANGE.into()],
                                ..default()
                            }),
                            AnimateMarker,
                        ));

                        commands.spawn((
                            Node {
                                aspect_ratio: Some(1.),
                                height: percent(100),
                                border: UiRect::all(px(b)),
                                margin: UiRect::left(px(20)),
                                border_radius: BorderRadius::all(px(20)),
                                ..default()
                            },
                            BackgroundGradient::from(RadialGradient {
                                stops: stops.clone(),
                                shape: RadialGradientShape::ClosestSide,
                                position: UiPosition::CENTER,
                                ..default()
                            }),
                            BorderGradient::from(LinearGradient {
                                angle: 3. * TAU / 8.,
                                stops: vec![YELLOW.into(), Color::WHITE.into(), ORANGE.into()],
                                ..default()
                            }),
                            AnimateMarker,
                        ));
                        commands.spawn((
                            Node {
                                aspect_ratio: Some(1.),
                                height: percent(100),
                                border: UiRect::all(px(b)),
                                margin: UiRect::left(px(20)),
                                border_radius: BorderRadius::all(px(20)),
                                ..default()
                            },
                            BackgroundGradient::from(ConicGradient {
                                start: 0.,
                                stops: stops
                                    .iter()
                                    .map(|stop| AngularColorStop::auto(stop.color))
                                    .collect(),
                                position: UiPosition::CENTER,
                                ..default()
                            }),
                            BorderGradient::from(LinearGradient {
                                angle: 3. * TAU / 8.,
                                stops: vec![YELLOW.into(), Color::WHITE.into(), ORANGE.into()],
                                ..default()
                            }),
                            AnimateMarker,
                        ));
                    });
                });
            }

            let button = commands.spawn((
                        Button,
                        Node {
                            border: UiRect::all(px(2)),
                            padding: UiRect::axes(px(8), px(4)),
                            // horizontally center child text
                            justify_content: JustifyContent::Center,
                            // vertically center child text
                            align_items: AlignItems::Center,
                            border_radius: BorderRadius::MAX,
                            ..default()
                        },
                        BorderColor::all(Color::WHITE),
                        BackgroundColor(Color::BLACK),
                        children![(
                            Text::new("next color space"),
                            TextColor(Color::srgb(0.9, 0.9, 0.9)),
                            TextShadow::default(),
                        )]
                )).observe(
                    |_event: On<Pointer<Over>>, mut border_query: Query<&mut BorderColor, With<Button>>| {
                    *border_query.single_mut().unwrap() = BorderColor::all(RED);


                })
                .observe(
                    |_event: On<Pointer<Out>>, mut border_query: Query<&mut BorderColor, With<Button>>| {
                    *border_query.single_mut().unwrap() = BorderColor::all(Color::WHITE);
                })
                .observe(
                        |_event: On<Pointer<Click>>,
                            mut gradients_query: Query<&mut BackgroundGradient>,
                            mut label_query: Query<
                            &mut Text,
                            With<CurrentColorSpaceLabel>,
                        >| {
                            let mut current_space = InterpolationColorSpace::default();
                            for mut gradients in gradients_query.iter_mut() {
                                for gradient in gradients.0.iter_mut() {
                                    let space = match gradient {
                                        Gradient::Linear(linear_gradient) => {
                                            &mut linear_gradient.color_space
                                        }
                                        Gradient::Radial(radial_gradient) => {
                                            &mut radial_gradient.color_space
                                        }
                                        Gradient::Conic(conic_gradient) => {
                                            &mut conic_gradient.color_space
                                        }
                                    };
                                    *space = match *space {
                                        InterpolationColorSpace::Oklaba => {
                                            InterpolationColorSpace::Oklcha
                                        }
                                        InterpolationColorSpace::Oklcha => {
                                            InterpolationColorSpace::OklchaLong
                                        }
                                        InterpolationColorSpace::OklchaLong => {
                                            InterpolationColorSpace::Srgba
                                        }
                                        InterpolationColorSpace::Srgba => {
                                            InterpolationColorSpace::LinearRgba
                                        }
                                        InterpolationColorSpace::LinearRgba => {
                                            InterpolationColorSpace::Hsla
                                        }
                                        InterpolationColorSpace::Hsla => {
                                            InterpolationColorSpace::HslaLong
                                        }
                                        InterpolationColorSpace::HslaLong => {
                                            InterpolationColorSpace::Hsva
                                        }
                                        InterpolationColorSpace::Hsva => {
                                            InterpolationColorSpace::HsvaLong
                                        }
                                        InterpolationColorSpace::HsvaLong => {
                                            InterpolationColorSpace::Oklaba
                                        }
                                    };
                                    current_space = *space;
                                }
                            }
                            for mut label in label_query.iter_mut() {
                                label.0 = format!("{current_space:?}");
                            }
                        }
                    ).id();

            commands.spawn(
                Node {
                    flex_direction: FlexDirection::Column,
                    row_gap: px(10),
                    align_items: AlignItems::Center,
                    ..Default::default()
                }
            ).with_children(|commands| {
                commands.spawn((Text::new(format!("{:?}", InterpolationColorSpace::default())), TextFont { font_size: FontSize::Px(25.), ..default() }, CurrentColorSpaceLabel));

            })
            .add_child(button);
        });
}

pub const fn with_hint(self, hint: f32) -> AngularColorStop

Trait Implementations

impl Clone for AngularColorStop

fn clone(&self) -> AngularColorStop

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Copy for AngularColorStop

impl Debug for AngularColorStop

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl Default for AngularColorStop

fn default() -> AngularColorStop

Returns the “default value” for a type.

impl<'de> Deserialize<'de> for AngularColorStop

fn deserialize<__D>( __deserializer: __D, ) -> Result<AngularColorStop, <__D as Deserializer<'de>>::Error>

where __D: Deserializer<'de>,

Deserialize this value from the given Serde deserializer.

impl From<(Color, f32)> for AngularColorStop

fn from(_: (Color, f32)) -> AngularColorStop

Converts to this type from the input type.

impl From<Color> for AngularColorStop

fn from(color: Color) -> AngularColorStop

Converts to this type from the input type.

impl From<Srgba> for AngularColorStop

fn from(color: Srgba) -> AngularColorStop

Converts to this type from the input type.

impl FromArg for AngularColorStop

type This<'from_arg> = AngularColorStop

The type to convert into.

fn from_arg( arg: Arg<'_>, ) -> Result<<AngularColorStop as FromArg>::This<'_>, ArgError>

Creates an item from an argument.

impl FromReflect for AngularColorStop

fn from_reflect( reflect: &(dyn PartialReflect + 'static), ) -> Option<AngularColorStop>

Constructs a concrete instance of Self from a reflected value.

fn take_from_reflect( reflect: Box<dyn PartialReflect>, ) -> Result<Self, Box<dyn PartialReflect>>

Attempts to downcast the given value to Self using, constructing the value using from_reflect if that fails.

impl GetOwnership for AngularColorStop

fn ownership() -> Ownership

Returns the ownership of Self.

impl GetTypeRegistration for AngularColorStop

fn get_type_registration() -> TypeRegistration

Returns the default TypeRegistration for this type.

fn register_type_dependencies(registry: &mut TypeRegistry)

Registers other types needed by this type.

impl IntoReturn for AngularColorStop

fn into_return<'into_return>(self) -> Return<'into_return>

where AngularColorStop: 'into_return,

Converts Self into a Return value.

impl PartialEq for AngularColorStop

fn eq(&self, other: &AngularColorStop) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl PartialReflect for AngularColorStop

fn get_represented_type_info(&self) -> Option<&'static TypeInfo>

Returns the TypeInfo of the type represented by this value.

fn try_apply( &mut self, value: &(dyn PartialReflect + 'static), ) -> Result<(), ApplyError>

Tries to apply a reflected value to this value.

fn reflect_kind(&self) -> ReflectKind

Returns a zero-sized enumeration of “kinds” of type.

fn reflect_ref(&self) -> ReflectRef<'_>

Returns an immutable enumeration of “kinds” of type.

fn reflect_mut(&mut self) -> ReflectMut<'_>

Returns a mutable enumeration of “kinds” of type.

fn reflect_owned(self: Box<AngularColorStop>) -> ReflectOwned

Returns an owned enumeration of “kinds” of type.

fn try_into_reflect( self: Box<AngularColorStop>, ) -> Result<Box<dyn Reflect>, Box<dyn PartialReflect>>

Attempts to cast this type to a boxed, fully-reflected value.

fn try_as_reflect(&self) -> Option<&(dyn Reflect + 'static)>

Attempts to cast this type to a fully-reflected value.

fn try_as_reflect_mut(&mut self) -> Option<&mut (dyn Reflect + 'static)>

Attempts to cast this type to a mutable, fully-reflected value.

fn into_partial_reflect(self: Box<AngularColorStop>) -> Box<dyn PartialReflect>

Casts this type to a boxed, reflected value.

fn as_partial_reflect(&self) -> &(dyn PartialReflect + 'static)

Casts this type to a reflected value.

fn as_partial_reflect_mut(&mut self) -> &mut (dyn PartialReflect + 'static)

Casts this type to a mutable, reflected value.

fn reflect_partial_eq( &self, value: &(dyn PartialReflect + 'static), ) -> Option<bool>

Returns a “partial equality” comparison result.

fn reflect_partial_cmp( &self, value: &(dyn PartialReflect + 'static), ) -> Option<Ordering>

Returns a “partial comparison” result.

fn debug(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Debug formatter for the value.

fn reflect_clone(&self) -> Result<Box<dyn Reflect>, ReflectCloneError>

Attempts to clone Self using reflection.

fn apply(&mut self, value: &(dyn PartialReflect + 'static))

Applies a reflected value to this value.

fn to_dynamic(&self) -> Box<dyn PartialReflect>

Converts this reflected value into its dynamic representation based on its kind.

fn reflect_clone_and_take<T>(&self) -> Result<T, ReflectCloneError>

where T: 'static, Self: Sized + TypePath,

For a type implementing PartialReflect, combines reflect_clone and take in a useful fashion, automatically constructing an appropriate ReflectCloneError if the downcast fails.

fn reflect_hash(&self) -> Option<u64>

Returns a hash of the value (which includes the type).

fn is_dynamic(&self) -> bool

Indicates whether or not this type is a dynamic type.

impl Reflect for AngularColorStop

fn into_any(self: Box<AngularColorStop>) -> Box<dyn Any>

Returns the value as a Box<dyn Any>.

fn as_any(&self) -> &(dyn Any + 'static)

Returns the value as a &dyn Any.

fn as_any_mut(&mut self) -> &mut (dyn Any + 'static)

Returns the value as a &mut dyn Any.

fn into_reflect(self: Box<AngularColorStop>) -> Box<dyn Reflect>

Casts this type to a boxed, fully-reflected value.

fn as_reflect(&self) -> &(dyn Reflect + 'static)

Casts this type to a fully-reflected value.

fn as_reflect_mut(&mut self) -> &mut (dyn Reflect + 'static)

Casts this type to a mutable, fully-reflected value.

fn set(&mut self, value: Box<dyn Reflect>) -> Result<(), Box<dyn Reflect>>

Performs a type-checked assignment of a reflected value to this value.

impl Serialize for AngularColorStop

fn serialize<__S>( &self, __serializer: __S, ) -> Result<<__S as Serializer>::Ok, <__S as Serializer>::Error>

where __S: Serializer,

Serialize this value into the given Serde serializer.

impl Struct for AngularColorStop

fn field(&self, name: &str) -> Option<&(dyn PartialReflect + 'static)>

Gets a reference to the value of the field named name as a &dyn PartialReflect.

fn field_mut( &mut self, name: &str, ) -> Option<&mut (dyn PartialReflect + 'static)>

Gets a mutable reference to the value of the field named name as a &mut dyn PartialReflect.

fn field_at(&self, index: usize) -> Option<&(dyn PartialReflect + 'static)>

Gets a reference to the value of the field with index index as a &dyn PartialReflect.

fn field_at_mut( &mut self, index: usize, ) -> Option<&mut (dyn PartialReflect + 'static)>

Gets a mutable reference to the value of the field with index index as a &mut dyn PartialReflect.

fn name_at(&self, index: usize) -> Option<&str>

Gets the name of the field with index index.

fn index_of_name(&self, name: &str) -> Option<usize>

Gets the index of the field with the given name.

fn field_len(&self) -> usize

Returns the number of fields in the struct.

fn iter_fields(&self) -> FieldIter<'_>

Returns an iterator over the values of the reflectable fields for this struct.

fn to_dynamic_struct(&self) -> DynamicStruct

Creates a new DynamicStruct from this struct.

fn get_represented_struct_info(&self) -> Option<&'static StructInfo>

Will return None if TypeInfo is not available.

impl StructuralPartialEq for AngularColorStop

impl TypePath for AngularColorStop

fn type_path() -> &'static str

Returns the fully qualified path of the underlying type.

fn short_type_path() -> &'static str

Returns a short, pretty-print enabled path to the type.

fn type_ident() -> Option<&'static str>

Returns the name of the type, or None if it is anonymous.

fn crate_name() -> Option<&'static str>

Returns the name of the crate the type is in, or None if it is anonymous.

fn module_path() -> Option<&'static str>

Returns the path to the module the type is in, or None if it is anonymous.

impl Typed for AngularColorStop

fn type_info() -> &'static TypeInfo

Returns the compile-time info for the underlying type.