I just completed having a working prototype . The code is right now just straight flow to allow easy tweaking .
Some timing notes :
The cairo initialization and writing surface to png [the boilerplate] take :
anil@anil-Studio-1558:~$ time python GSoC\ -\ Mozilla/boilerplate.py
The program takes somewhere between 86ms to 100ms
anil@anil-Studio-1558:~$ time python GSoC\ -\ Mozilla/ver2.py
Somethings left to do :
The code right now has two seperate sections to draw the clockwise and anticlockwise sections [ I actually copy pasted and edited 🙂 ] . That would be integrated into single function.
Sample Output [Output is for the input conditions put above] :
The code can be viewed / downloaded from here .
The code draws a single corner starting from a start angle .
Some outputs from this code :
1. Start angle = 0.0 ; Border width varying from 80px to 40px.
2. Start angle = pi/4 ; Border width varying from 80px to 40px.
Code can be viewed here.
Now working on having it integrated the previously written code to draw just sides .
Cairo bindings are available in python. The code doesnt draw entire sides : it just draws the straight sections of all sides . To be used for all testing purposes .
The code can be viewed / downloaded from here
For most part of it is easy to read . Any suggestions welcome .
Sample output :
Working on bug : https://bugzilla.mozilla.org/show_bug.cgi?id=652650 .
Logic [copy on bugzilla as well ]:
Proposed way to render dashed corners:
Dash length is taken 2*(border width).In the event of having different border width resulting in different dash lengths , the largest of them is taken as dash length[common dash length]. Gap length is calculated but is limited to [0.5*dashLength,dashLength) .
To calculate the gap length . First ‘side’ here on refers to part of side minus the corner paths plus the part of corners [demarcated by angle a , tan(a)= ratio of border widths] adjoining to the side. Length of side is length of path of center along the side. Each side ends on either side in half a dash.Gap length is calculated such that we have exactly we have exactly n dashes , n+1 gaps and half dash on each end. Having the constrain n is integer , gapWidth in [0.5*dashLength,dashLength) and that lower value of gap width given precedence[in case two cases possible] we get symmetrically placed set of dashes along the curve.
Sample Calculation :
border-width:50px; width:800px; height: 800px; border-radius:100px;
side without corner paths = 800 – 2*50 = 700px
angle of demarcation tan(a) = 50/50 = 1 => a = pi/4
curved path to be added = 2*[75 * pi/4] = 118px
total length = 818px
dash length= 2*50 = 100px
818 = 2*50 + (n+1)x + n*100 [x -> gap width]
n = 4 ,gap width = 64px
In case when border width of sides are equal : The stroke width doesnt vary and hence cairo Just creating a path along the sides can be used to generate the dashed pattern.
Sample generated using cairo in python . Code attached : http://pastebin.com/ygUjFy4f
The logic to generate the bezier points needed to generate the curve along corner exists in gfxContext::RoundedRectangle .
This blog is mainly meant to post weekly progress report for project with Mozilla as a part of GSoC .