The LinearGradient class fills a shape with a linear color gradient pattern. The user may specify two or more gradient colors, and this Paint will provide an interpolation between each color.

The user should provide an array of Stops specifying how to distribute the colors along the gradient. The Stop#offset attribute should range from 0.0 to 1.0 and act like keyframes along the gradient (they mark where the gradient should be exactly a particular color).

If the proportional attribute is set to true (the default) then the start and end points of the gradient should be specified relative to the unit square (0.0->1.0) and will be stretched across the shape. If proportional attribute is set to false, then the start and end points should be specified as absolute pixel values and the gradient will not be stretched at all.

The two filled rectangles in the example below will render the same. The first uses proportional coordinates (the default) to specify the gradient's end points. The second uses absolute coordinates. Both of them fill the specified rectangle with a horizontal gradient that varies from black to red

 // object bounding box relative (proportional:true, default)
 Rectangle {
     x: 0 y: 0 width: 100 height: 100
     fill: LinearGradient {
         startX: 0.0
         startY: 0.0
         endX: 1.0
         endY: 0.0
         proportional: true
         stops: [
            Stop { offset: 0.0 color: Color.BLACK },
            Stop { offset: 1.0 color: Color.RED }
         ]
     }
 }
 
 // user space relative (proportional:false)
 Rectangle {
     x: 0 y: 0 width: 100 height: 100
     fill: LinearGradient {
         startX:   0.0
         startY:   0.0
         endX: 100.0
         endY:   0.0
         proportional: false
         stops: [
            Stop { offset: 0.0 color: Color.BLACK },
            Stop { offset: 1.0 color: Color.RED }
         ]
     }
 } 
 

Profile: common

This comment needs review.