[css3-images] Helping implementers with math

Hi,

Implementing CSS gradients in WeasyPrint a few months back involved 
doing a bit of trigonometry. Refreshing stuff learned in high school 
wasn’t so bad, but there is a particular result that I found tricky to 
get and not intuitive.

This paragraph of the spec defines the gradient line for linear-gradient()

> Starting from the center of the gradient box, extend a line at the
> specified angle in both directions. The ending point is the point on
> the gradient line where a line drawn perpendicular to the gradient
> line would intersect the corner of the gradient box in the specified
> direction. The starting point is determined identically, but in the
> opposite direction.

This is a flawless definition, but it doesn’t give much clue on how to 
find that point with math and code in the general case rather than with 
pen and paper in a given case.

I was just about to use an horrible formula involving arc-tangents and 
four cases before I got this one. I’d like to add it to the spec as a 
note, hopefully helping future implementers:


     Implementation note:
     Given:

     * <var>A</var> the angle (in any quadrant) defining the gradient 
line’s direction such that 0 degrees points upwards and positive angles 
represent clockwise rotation,
     * <var>W</var> the width of the gradient box,
     * <var>H</var> the height of the gradient box,

     The distance between the center and the gradient box and the ending 
point (ie. half the size of the gradient line) is:

     <code>abs(W * sin(A)) + abs(H * cos(A))</code>


I’m confident this is correct after triple-checking my proof, but I 
could write it up if necessary.

Cheers,
-- 
Simon Sapin

Received on Tuesday, 18 June 2013 16:46:36 UTC