Gradient painting

[husker-dev]

Looking through the source codes of styles, I saw several weird variables in the gradient. I understand what linear and radial mean but I don't understand what from and to mean.

These are two points, but points of what?

[mgarin]

These are double X,Y coordinates within background bounds. Each coordinate can normally have a value between 0.0f and 1.0f. Smaller and larger values can also be used for specifying points outside of bounds if necessary.

In case of X - 0.0f is left most point and 1.0f is right most point in case of LTR. In case component has RTL orientation it's opposite.

In case of Y - 0.0f is top most point and 1.0f is bottom most point.

[husker-dev]

Is there a way to set color length as this can be done in WebGradientChooser?

[mgarin]

Not exactly length, but you can specify fractions which can normally be provided in gradients:

<GradientBackground type="linear" from="0,0" to="1,1">
    <color fraction="0.0">blue</color>
    <color fraction="0.5">red</color>
</GradientBackground>

Fractions, similarly to the from and to points, can have float values between 0.0f and 1.0f (strictly), but they are applied to the line between from and to instead of background bounds.

So in the example above we have diagonal gradient from top-left to bottom-right of the style bounds. In top-left you will have blue color, by the middle of component it will already be pure red and continue to be pure red from there:

By default if fractions are not specified - colors will be equally spread. So with 2 colors default fractions are [ 0.0f, 1.0f ] with three - [ 0.0f, 0.5f, 1.0f ] with four - [ 0.0f, 0.25f, 0.5f, 0.75f, 1.0f ] etc.

So example from above with no fractions specified will look like this: Basically having pure colors only in the corners.

You can also have as many colors in a single gradient as you want:

<GradientBackground type="linear" from="0,0" to="1,1">
    <color fraction="0.0">blue</color>
    <color fraction="0.25">red</color>
    <color fraction="0.75">red</color>
    <color fraction="1.0">green</color>
</GradientBackground>

Closer distance between colors also results in a more abrupt transition: It is more noticeable with vibrant colors though.