模仿html的灵活矩形

时间：2013-11-14 02:51:54

标签： c++ opengl rectangles

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

great great rectangle!

它由：

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

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

没有border-radius

enter image description here

w / border-radius

enter image description here

所以我真正感到困惑的是

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

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

修改

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

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

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

enter image description here

*左边界

*角

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

1 个答案:

答案 0 :(得分：0)

Yey !!我已经明白了!!

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

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

enter image description here

说明：

  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)

    4. 现在我可以这样做：

    设计零件：

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

    结果：

    enter image description here

    rect是具有Lightning McQueen图片的那个。

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

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

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

相关问题
最新问题