#1051 Gradient API

brian Thu 1 Apr 2010

I just wanted to give everyone a heads up, that I rewrote the gfx::Gradient class to have a model based on how gradients work in CSS3 and mozilla.

The new API includes:

  • full string encoding support
  • multiple positional stops
  • CSS model for starting position: named, pixel, or percentage based
  • end point based on viewbox, not fixed

That last point is tricky, because simpler APIs like SWT and Java2D use fixed start/ending points for the gradient. This is almost never what you want because if you change the rectangle being painted you also need to change the gradient definition.

So the Fantom API uses the CSS model where gradients are based on viewbox and allows percentage based gradient definitions. What this means in SWT, is that gradients will only only have limited support in the fillRect method where we can easily get the bounding box and create a SWT pattern on the fly. Also I only have basic 2 stop gradients working (SWT has an extremely limited API).

There is a new fwt/gradient example strip where you try out common gradients:

top, #fff, #000       // top to bottom; white to black
left, #fff, #000      // left to right; white to black
top left, #fff, #000  // top,left corner to right,bottom corner; white to black

JavaScript fixes coming shortly.

brian Thu 1 Apr 2010

Promoted to ticket #1051 and assigned to brian

brian Thu 1 Apr 2010

Ticket resolved in 1.0.53

andy Tue 6 Apr 2010

When I got into mapping the gradients to implementations, realized this format has a few shortcomings. In particular its impossible to map to the gfx::Graphics correctly. The start/angle style is actually awkward to use in practice as well.

So I reworked this code to go back and use an explicit start and end point for the gradient line. The points support pixel or percent values - so it still covers all our bases. I removed the position names - don't think they add alot of value. And I changed the gradient stop positions to be percentage based using an float value in range 0..1.

The above examples now look like this:

top, #fff, #000       =>  0% 0%, 0% 100%, #fff, #000
left, #fff, #000      =>  0% 0%, 100% 0%, #fff, #000
top left, #fff, #000  =>  0% 0%, 100% 100%, #fff, #000

A bit more verbose - but maps much more efficiently to underlying platforms.

Login or Signup to reply.