-1

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.

great great rectangle!

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

enter image description here

w/ border-radius

enter image description here

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

enter image description here

*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?

genpfault
  • 51,148
  • 11
  • 85
  • 139
mr5
  • 3,438
  • 3
  • 40
  • 57
  • Why do I have a vote for close topic? – mr5 Nov 14 '13 at 02:56
  • 1
    Peruse http://mxr.mozilla.org/mozilla-central/source/layout/base/nsCSSRenderingBorders.cpp to get a taste of just how big a task you have bitten off. – zwol Nov 14 '13 at 02:56
  • I don't really see a specific question either. –  Nov 14 '13 at 03:08
  • 1
    I didn't closevote this (nor will I - I think the local hivemind has gotten much too trigger-happy about closing questions lately, so I personally only vote to close obvious spam) but this *isn't* a good question; it is too broad. I mean, http://www.w3.org/TR/css3-background/ takes 17,000 words to specify *part* of the thing you're trying to implement (you will also need to read css3-box, and probably others). Any meaningful answer to the question you've posed would be of comparable length. That's not what this site is geared for. – zwol Nov 14 '13 at 03:09
  • Even though OP tagged C++/OpenGL, it really doesn't have anything to do with either, considering he posted no code. OP's only example of progress is a screenshot of a rectangle. There really isn't a specific question either, even though he listed the things he's 'confused about'. What would help the question would be for him to pick a subset of the HTML specification that he would like to implement, make an attempt, then ask about that. –  Nov 14 '13 at 03:16
  • @Zack Okay, that was really huge. I will just focus on very smallest thing I can implement. – mr5 Nov 14 '13 at 03:21
  • @remyabel Very sorry for the broad questions I made. Please see my updated post. I think it somewhat forms like a focus-of-the-question(?) – mr5 Nov 14 '13 at 03:22
  • 4
    I'm afraid your reduced question is still not a good question for this site. It still amounts to "Where do I begin to climb this mountain?" Unlike with actual mountain climbing, it will work much better if you try *something* first and then ask questions about where you get stuck. – zwol Nov 14 '13 at 03:26
  • @Zack Please look again for my question improvement. – mr5 Nov 14 '13 at 03:45
  • @remyabel Please see my improved question. – mr5 Nov 14 '13 at 04:01

1 Answers1

0

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.

enter image description here

Explanation:

  1. 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.
  2. 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).
  3. 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:

enter image description here

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.

Community
  • 1
  • 1
mr5
  • 3,438
  • 3
  • 40
  • 57