模仿HTML的灵活矩形 [英] Imitating html's flexible rectangle

问题描述

我想模仿著名的HTML很棒的 RECTANGLE .我的意思是矩形的所有特征，例如borders，border-radius，triangulated quad on corners等.我不喜欢使用除我以外的任何其他库.我想创建这个程序是为了学习和积累经验，并希望将来将其用作GUI系统.我正在研究这种随机矩形的概念.

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.

• 4 GL_TRIANGLES为四角形
• 拐角处有4条弧线
• 4个边界
• 前面有一个大矩形矩形

• 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 :)

无边界半径

带有边界半径

• 边框大小
• 边界位置
• 是X，Y还是W，H
• 何时绘制或不绘制最前面的矩形
• 我还不知道的一切.

...请发表其他评论，以便澄清.谢谢！

嗯...，好的，只是一个最小的问题.我只是想实现这些东西，并在更改矩形的单个属性时以编程方式计算它们的值.

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.

• 边框半径大小
• 边境一侧

我在这里放了太多图片，请理解我:(

*左边框

*角落

我当时在考虑那种矩形的定位，在我的脑海中很难根据我要在designing part上定义的属性集来计算它们的坐标或尺寸.例如，如果我定义border-radius-top-left的值为50％，而其border-size-left的计数器部分具有某个值，那么我必须考虑的是formula.或者，是否必须添加任何组件/私有属性才能使此事情发生?

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?

推荐答案

是的！我想通了！

请让我在这里讨论我的[已解决的问题].

对不起，我的未分类艺术:)我将其用于财产分割是丰富多彩的.

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

1. 弧 w/c用作corner-radii.
   • points (x, y)的公式将在此处自动生成
   • corner-radii-points (x, y)是目标.
   • points (x, y)应该是根据给定半径值进行的唯一调整.
   • 此部分的弯曲位置应该是静态的.

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.

• 诸如[x, y, width, height]之类的属性取决于corner-radii-points(x, y)和points(x, y).

• Properties of this such as [x, y, width, height] will depend on corner-radii-points(x, y) and points(x, y).

• 这只是作为封面
• 诸如[x1, y1, x2, y2](这是一个多边形，所以我将其标记为)之类的属性将取决于points (x, y)

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

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);

结果:

rect是具有闪电麦奎因图片的人.

这些都是我根据反复试验评估的公式. 也要感谢 Mark Garcia 先生通过演示一些图表为我提供帮助，并建议使用MS Paint进行可视化:)

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

下一个问题是遮盖，因为您可以看到同时存在non-curved borders和corner radius，但是目前我不会关注这一点.

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.

如果有人对这种矩形实现感兴趣，可以在这里PM我，我将为您提供源代码.

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

这篇关于模仿HTML的灵活矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！