模仿html的灵活矩形

Question

我想模仿着名的HTML伟大的 RECTANGLE 。我的意思是矩形的所有特征，如borders，border-radius，triangulated quad on corners等。我不喜欢使用除了我之外的任何其他库。我想为了学习和体验而创建这个，并将其用作未来的GUI系统。我正在研究这种混洗矩形的概念。

它由：

组成

• 4 GL_TRIANGLES作为角落的四边形
• 角落上的4个弧形
• 四面有四个边界
• 正面有一个正面大矩形

这些是我到目前为止所做的输出：）

没有border-radius

w / border-radius

---

所以我真正感到困惑的是

• 边框尺寸
• 边境位置
• 是X，Y还是W，H's
• 何时绘制或不绘制最前面的矩形
• 我还不知道的任何事情。

...请评论我应该包含的其他内容以供澄清。谢谢！的

修改

嗯...，好吧，只有一个小问题。我只是想实现这些东西并以编程方式计算它们的值，因为我改变了矩形的单个属性。

• 边界半径-尺寸
• 边界两侧

---

我在这里放了太多图片，请理解我：（

*左边界

*角

我在考虑那种矩形定位，根据我将要在designing part定义的属性集来计算它们的坐标或大小是非常困难的。例如，如果我将border-radius-top-left的值定义为50％且其border-size-left的计数器部分具有特定值，那么我必须考虑formula。或者，我是否必须添加任何组件/私有属性才能使这件事发生？

Answer 1

Yey !!我已经明白了!!

请允许我在这里讨论我的[问题已解决]。

对不起我的未分类艺术:)我为了财产分离而做了多彩。

说明：

1. Arcs w / c用作corner-radii。
   • points (x, y)的公式将在此处自动生成
   • corner-radii-points (x, y)是目标。
   • points (x, y)应该是唯一根据给定的半径值进行调整的人。
   • 弯曲的部分应该是静态的。
2. 伪边框这些是inner-side-borders。
   • [x, y, width, height]等属性取决于corner-radii-points(x, y)和points(x, y)。
3. 内部四边 w / c是inner-rectangle
   • 这只是作为封面
   • 此类的属性，例如[x1, y1, x2, y2]（这是一个多边形，因此我将其标记为）取决于points (x, y)

现在我可以这样做：

设计零件：

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是具有Lightning McQueen图片的那个。

这些是我根据反复试验评估的公式。 还要感谢Sir Mark Garcia帮助我演示一些图表，并建议使用MS Paint进行可视化：）

---

下一个问题是屏蔽，因为您可以看到同时有non-curved borders和corner radius，但此时我不会专注于此

如果有人对这种矩形实现感兴趣，你可以在这里PM我，我会给你源代码。