https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files
Chapter 13 // Exercise 2
Draw a box with rounded corners. Define a class Box, consisting of four lines and four arcs.
Github: https://github.com/l-paz91/principles-practice/tree/master/Chapter%2013/Exercise%202
This could've been done quickly however I wanted to be able to give users a way of adjusting the 'roundness' of the corners and I was stumped (I'm not good at this type of stuff...I just like to make things go faster). I got it wrong a couple of times due to not taking the time to understand how fl_arc() draws.
The arc is basically determined by the radius of the circle it calculates, so by supplying a "roundness" variable we can use that to get the radius of the arcs (by simply dividing it by 2). Perhaps a better name for it would be "Circle Width" but I don't think and end user would find that useful.
The cyan box was given a 'roundness' of 20 and the black box 100. Fl_arc() really confused me in this because I didn't stop to think about the point at where each arc was being drawn from. Fl_arc() simply draws a portion of a given circle from the top left hand corner. So that would mean our top right-hand arc x,y co-ordinates lie before the end of the top vertical line (exactly the end minus the radius).
When drawing the lines, they use the position of the arcs (plus either the radius or roundness) to determine the length/height they should be; thus allowing them to adapt to tighter corners (but not exceed the width/height supplied).
A quick note on fl_arc as well. Fl_arc() requires you to give two angles (with the first smaller or equal to the second). If you imagine a clock face, FLTK draws an arc clockwise with 3 being 0 (for some odd reason). So the top left-hand arc would be the angles 90 to 180 (or 9 to 12).
To fill in the box, fl_pie() just needs to be supplied with the same data given to fl_arc() and then draw 3 rectangles using fl_rectf().
The arc is basically determined by the radius of the circle it calculates, so by supplying a "roundness" variable we can use that to get the radius of the arcs (by simply dividing it by 2). Perhaps a better name for it would be "Circle Width" but I don't think and end user would find that useful.
The cyan box was given a 'roundness' of 20 and the black box 100. Fl_arc() really confused me in this because I didn't stop to think about the point at where each arc was being drawn from. Fl_arc() simply draws a portion of a given circle from the top left hand corner. So that would mean our top right-hand arc x,y co-ordinates lie before the end of the top vertical line (exactly the end minus the radius).
When drawing the lines, they use the position of the arcs (plus either the radius or roundness) to determine the length/height they should be; thus allowing them to adapt to tighter corners (but not exceed the width/height supplied).
A quick note on fl_arc as well. Fl_arc() requires you to give two angles (with the first smaller or equal to the second). If you imagine a clock face, FLTK draws an arc clockwise with 3 being 0 (for some odd reason). So the top left-hand arc would be the angles 90 to 180 (or 9 to 12).
To fill in the box, fl_pie() just needs to be supplied with the same data given to fl_arc() and then draw 3 rectangles using fl_rectf().
No comments:
Post a Comment