OpenGL—ES 1.0 2d 圆角矩形 [英] OpenGL—ES 1.0 2d rounded rectangle

问题描述

如何在 OpenGL 中制作圆角矩形，或任何带圆角的多边形?

How to make rounded rectangle in OpenGL, or any polygon with rounded corners?

推荐答案

使用多边形

如果绝对需要使用多边形，例如需要大量缩放或缩放具有舍入的对象，或者需要控制舍入量，则可以将矩形分成几个子对象.

Using polygons

If using polygons is absolutely required, for example if objects with rounding need to be scaled or zoomed a lot or if amount of rounding needs to be controlled, it is possible to break rectangle into several sub-objects.

至少有三个矩形部分和四个角.计算角坐标很容易.只需从圆圈中找到一个点并构建如上图所示的三角形.

There are at least three rectangular parts and four corners. Calculating corner coordinates is easy. Just find a point from circle and build triangles like in picture above.

 float anglerad = PI * angle / 180.0f;
 float x = sinf(anglerad) * radius; 
 float y = cosf(anglerad) * radius;

它仍然会有锋利的边缘，但更多的点会使角落更圆.小物体比大物体需要的积分少.

It will still have sharp edges, but more points make corners more round. Small objects need less points than big objects.

简单的方法是使用 GL_TRIANGLE_FAN 进行弯道.然而，对于 OpenGL ES，尽量减少 OpenGL 调用的数量并使用更多顶点可能是明智的，因为可以将整个对象构建为 GL_TRIANGLE_STRIP.

Easy route is to use GL_TRIANGLE_FAN for corners. However with OpenGL ES it might be wise to minimize amount of OpenGL calls and just use more vertices as it is possible to build whole object as GL_TRIANGLE_STRIP.

这种方法可以用于任何形状.对于矩形，角的角度始终为 90 度，但对于其他形状，角度需要从边缘计算.

This approached can be used with any shape. With a rectangle, angle of corner is always 90 degrees, but with other shapes angle needs to be calculated from the edges.

另一种方法称为 9-slice scaling.矩形和纹理被分成 9 个切片.实际的舍入是在纹理的角落.想法是角落没有缩放，但保持其原始大小.这种方法是 UI 设计中广泛使用的模式，允许可变大小的 UI 元素(如按钮).它的优点是一个矩形只需要这 9 个四边形来渲染.但是如果还需要缩放角落，尤其是纹理分辨率较低时，它看起来会很糟糕.

Another approach is called 9-slice scaling. Rectangle and texture are broken into 9 slices. Actual rounding is in corner of a texture. Idea is that corners are not scaled, but maintain their original size. This approach is widely used pattern in UI-design allowing variable size UI-elements like buttons. Its advantage is that one rectangle needs only these 9 quads to render. But it will look bad if also corners need to be scaled and especially if texture is low resolution.

这篇关于OpenGL—ES 1.0 2d 圆角矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！