Imitating html's flexible rectangle [closed]

问题

I want to imitate the well-known HTML's great great RECTANGLE. I mean all of the characteristic of the rectangles like borders, border-radius, triangulated quad on corners, etc. I don't like to use any other libraries except mine. I would like to create this one for the sake of learning and experience, and also to use it for the future as a GUI system. I am working on this concept of shuffled rectangles.

It is composed of:

4 GL_TRIANGLES as quadrilateral on corners
4 arcs on corners
4 borders on all sides
And one front big rectangle on the front

And these are the outputs I made so far :)

w/o border-radius

w/ border-radius

So the things I am really really confused with are

Border-sizes
Border-locations
Is it the X, Y's or the W, H's
When to draw or not front-most rectangle
Anything I don't know yet.

...Please comment other things I should include here for clarification. Thanks!

Edit:

Hmm..., Okay as for a minimal question only. I just wanted to implement this stuffs and programmatically compute their values as I change a single attributes of the rectangle.

border-radii-sizes
border-sides

I'm putting too much images here, please please understand me :(

*left-border

*corner

I was thinking of that kind of rectangles positioning and it's really difficult in my head to compute for their coordinates or the sizes base on the set of attributes I'm gonna define on the designing part. For example, If I define the border-radius-top-left to have a value of 50% with its counter part of border-size-left with a certain value, what would be the formula I must consider. Or, must I need to add any component/ private attributes in order to make this thing happen?

回答1:

Yey!! I have figured it out!!

Please let me SO to discuss my [problem solved] here.

Sorry for my unclassified art :) I made it colorful for property separation.

Explanation:

Arcs w/c serves as corner-radii.
- The formula for points (x, y) will be automatically generated here
- corner-radii-points (x, y) are the target.
- points (x, y) Should be the only one adjusting based on the given radii values.
- Curved part of this should be static in position.
Fake borders these are the inner-side-borders.
- Properties of this such as [x, y, width, height] will depend on corner-radii-points(x, y) and points(x, y).
Inner quad w/c is the inner-rectangle
- This will just serves as cover
- Properties of this such as [x1, y1, x2, y2](this is a polygon so I labeled it like that) will depend on points (x, y)

Now I can simply do this:

Designing Part:

int w3 = rect.width >> 3;
int h3 = rect.height >> 3;

rect.setBorderRadius(C_NW, w3, h3);
rect.setBorderRadius(C_NE, w3, h3);
rect.setBorderRadius(C_SE, w3, h3);
rect.setBorderRadius(C_SW, w3, h3);

rect.setColors(C_NW, cc::getColor(COLORS::RED));
rect.setColors(C_NE, cc::getColor(COLORS::GREEN));
rect.setColors(C_SE, cc::getColor(COLORS::BLUE));
rect.setColors(C_SW, cc::getColor(COLORS::YELLOW));

rect.setBorderColor(B_TOP, cc::getColor(COLORS::WHITE));
rect.setBorderColor(B_RIGHT, cc::getColor(COLORS::WHITE));
rect.setBorderColor(B_BOTTOM, cc::getColor(COLORS::GRAY3));
rect.setBorderColor(B_LEFT, cc::getColor(COLORS::GRAY3));

rect.setBorderSize(B_TOP, 20);
rect.setBorderSize(B_RIGHT, 20);
rect.setBorderSize(B_BOTTOM, 20);
rect.setBorderSize(B_LEFT, 20);

Results:

rect is the one with Lightning McQueen image.

Those are the formulas I evaluate base on trial and error. Also thanks to Sir Mark Garcia for helping me by demonstrating some diagrams, and suggested to use MS Paint for visualization :)

Next problem is masking as you can see that there are non-curved borders and corner radius at the same time, but I won't focus on that at this moment.

If ever someone is interested in this kind of rectangle implementation, you can PM me here and I'll give you the source code.

来源：https://stackoverflow.com/questions/19968624/imitating-htmls-flexible-rectangle

标签

c++

opengl

rectangles