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

Advertisements

About anil

science is my passion so im here for it
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s