Working Prototype : Dashed border drawing

I just completed having a working prototype . The code is right now just straight flow to allow easy tweaking .

Some timing notes :

width=800.0
height=600.0
borderSizes=[50.0,50.0,50.0,50.0]
borderRadii=[[300.0,300.0],[100.0,100.0],[100.0,100.0],[100.0,100.0]]

The cairo initialization and writing surface to png [the boilerplate] take :

anil@anil-Studio-1558:~$ time python GSoC\ -\ Mozilla/boilerplate.py 

real	0m0.088s
user	0m0.080s
sys	0m0.004s

The program takes somewhere between 86ms to 100ms

anil@anil-Studio-1558:~$ time python GSoC\ -\ Mozilla/ver2.py

real 0m0.101s
user 0m0.096s
sys 0m0.004s

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 .

Posted in Uncategorized | Tagged , , , | Leave a comment

Corner Drawing

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 .

Posted in Uncategorized | Tagged , | Leave a comment

Prototyping in python

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 :

Posted in Uncategorized | Tagged , , | Leave a comment

Logic for rendering dashes

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 :
Case :
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

Posted in Uncategorized | Tagged , , | Leave a comment

Solving the special case one : When border width equal

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 .

Posted in Uncategorized | Tagged , | Leave a comment

Blog Objective

This blog is mainly meant to post weekly progress report for project with Mozilla as a part of GSoC .

Posted in Uncategorized | Leave a comment