c++ - 模仿html的灵活矩形

Question

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

它由以下部分组成：

• 4GL_TRIANGLES作为角上的四边形
• 拐角处有 4 条弧线
• 四边形4个边框
• 前面还有一个大长方形

这些是我到目前为止所做的输出:)

无边界半径

带边界半径

---

所以我真的很困惑的是

• 边框尺寸
• 边界位置
• 是 X、Y 还是 W、H
• 何时绘制或不绘制最前面的矩形
• 什么我还不知道。

...请评论我应该在此处包含的其他内容以进行澄清。谢谢！

编辑：

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

• 边框半径大小
• 边界边

---

图片太多了，请谅解：（

*左边框

*角落

我在考虑那种矩形定位，我真的很难根据我要在designing part. 例如，如果我定义border-radius-top-left50% 的值为 50%，其对应部分为border-size-left某个值，formula我必须考虑什么。或者，我是否必须添加任何组件/私有属性才能使这件事发生？

Answer 1

耶！！我已经想通了！！

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

对不起我的未分类艺术 :) 我为财产分离使它变得丰富多彩。

解释：

1. 弧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是具有闪电麦昆形象的那一款。

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

---

下一个问题是掩蔽，正如您所看到的那样，同时存在non-curved borders和corner radius，但我现在不会专注于此。

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