模仿html的灵活矩形[关闭]答案

【问题标题】：Imitating html's flexible rectangle [closed]模仿html的灵活矩形[关闭]
【发布时间】：2013-11-14 02:51:53
【问题描述】：

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

由以下组成：

4 GL_TRIANGLES 角上的四边形
拐角处有 4 个圆弧
四边都有4个边框
前面还有一个大矩形

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

无边框半径

带边框半径

所以我真正感到困惑的是

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

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

编辑：

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

边框半径大小
边界边

图片太多了，请谅解:(

*左边框

*角落

我在考虑那种矩形定位，我真的很难根据我要在designing part 上定义的一组属性来计算它们的坐标或大小。例如，如果我将border-radius-top-left 定义为具有50% 的值，而其对应部分border-size-left 具有某个值，那么我必须考虑的formula 是什么。或者，我必须添加任何组件/私有属性才能使这件事发生吗？

【问题讨论】：

为什么我要为关闭主题投票？
细读mxr.mozilla.org/mozilla-central/source/layout/base/… 以了解您完成了一项艰巨的任务。
我也没有真正看到具体的问题。
我没有对此进行投票（我也不会 - 我认为当地的 hivemind 最近对关闭问题感到非常高兴，所以我个人只投票关闭明显的垃圾邮件）但是这个不是一个好问题；它太宽泛了。我的意思是，w3.org/TR/css3-background 需要 17,000 个字来指定您尝试实现的东西的 part（您还需要阅读 css3-box，可能还有其他内容）。对您提出的问题的任何有意义的答案都将具有可比性。这不是本网站的目标。
恐怕您的简化问题对于本网站来说仍然不是一个好问题。它仍然相当于“我从哪里开始爬这座山？”与实际的登山不同，如果您先尝试某事，然后询问您卡在哪里的问题，效果会更好。

标签： c++ opengl rectangles

【解决方案1】：

耶！！我想通了！！

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

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

解释：

弧 w/c 用作corner-radii。
- points (x, y) 的公式将在此处自动生成
- corner-radii-points (x, y) 是目标。
- points (x, y) 应该是唯一一个根据给定半径值进行调整的。
- 它的弯曲部分应该是静止的。
假边框这些是inner-side-borders。
- 诸如[x, y, width, height] 之类的属性将取决于corner-radii-points(x, y) 和points(x, y)。
内部四边形 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 图像的那个。

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

下一个问题是masking，你可以看到同时有non-curved borders和corner radius，但我现在不关注这个。

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

【讨论】：