Android OpenGL ES详解——绘制圆角矩形

原创 已于 2024-11-29 22:17:29 修改 · 755 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#矩形 #圆形 #圆角矩形 #OpenGL

于 2024-11-22 22:19:09 首次发布

目录

 1、绘制矩形

Renderer基类

矩形Renderer类

顶点着色器

片元着色器

2、绘制圆形

圆形Renderer类

顶点着色器

片元着色器

3、绘制圆角矩形

圆角矩形Renderer类

顶点着色器

片元着色器

4、源码下载

 1、绘制矩形

Renderer基类

代码如下：

package com.example.roundrect.renderers

import android.content.Context
import android.opengl.GLES30
import android.opengl.GLSurfaceView.Renderer
import com.example.roundrect.R
import com.example.roundrect.program.RoundRectShaderProgram
import javax.microedition.khronos.egl.EGLConfig
import javax.microedition.khronos.opengles.GL10

open class BaseRenderer(context: Context) : Renderer {
    var mShaderProgram: RoundRectShaderProgram? = null
    var mContext = context

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES30.glClearColor(1.0f, 1.0f, 1.0f, 1.0f)
        mShaderProgram = RoundRectShaderProgram(
            mContext,
            R.raw.roundrect_vertex_shader,
            R.raw.roundrect_fragment_shader
        )
        mShaderProgram?.useProgram()
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        var side = Math.min(width, height)
        GLES30.glViewport(0, 0, side, side)
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)

    }
}

矩形Renderer类

代码如下：

package com.example.roundrect

import android.content.Context
import android.opengl.GLES30
import android.opengl.GLSurfaceView.Renderer
import com.opengllib.data.VertexArray
import com.opengllib.programs.ShaderProgram
import javax.microedition.khronos.egl.EGLConfig
import javax.microedition.khronos.opengles.GL10

class RoundRectRenderer(context: Context) : Renderer {
    private var mVertices = floatArrayOf(
        -0.5f, -0.5f,
        0.5f, 0.5f,
        -0.5f, 0.5f,
        -0.5f, -0.5f,
        0.5f, -0.5f,
        0.5f, 0.5f,
    )
    private var mShaderProgram: ShaderProgram? = null
    private var mContext = context
    private var mVertexArray: VertexArray? = null

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES30.glClearColor(0.6f, 0.7f, 0.8f, 1.0f)
        mVertexArray = VertexArray(mVertices)

        mShaderProgram = ShaderProgram(
            mContext,
            R.raw.roundrect_vertex_shader,
            R.raw.roundrect_fragment_shader
        )
        mShaderProgram?.useProgram()
        mVertexArray?.setVertexAttribPointer(
            0,
            mShaderProgram?.getPositionAttributeLocation()!!,
            2,
            0
        )

    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES30.glViewport(0, 0, width, height)
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        GLES30.glDrawArrays(GLES30.GL_TRIANGLES,0 ,mVertices.size / 2)
    }
}

顶点着色器

roundrect_vertex_shader.glsl代码如下：

attribute vec4 a_Position;

void main()
{
    gl_Position = a_Position;
}

片元着色器

roundrect_fragment_shader.glsl代码如下：

precision mediump float;

void main()
{
	gl_FragColor = vec4(0.8, 0.5, 0.3, 1.0);
}

2、绘制圆形

圆形Renderer类

代码如下：

package com.example.roundrect.renderers

import android.content.Context
import android.opengl.GLES30
import com.example.roundrect.Constant
import com.opengllib.data.VertexArray
import javax.microedition.khronos.egl.EGLConfig
import javax.microedition.khronos.opengles.GL10
import kotlin.math.cos
import kotlin.math.sin

open class CirclarRenderer(context: Context) : BaseRenderer(context) {
    var mVerticesCircle: FloatArray? = null
    var mCirclarVertexArray: VertexArray? = null

    init {
        mVerticesCircle = createCircle(0.5f, 100)
    }

    fun createCircle(radius: Float, n: Int): FloatArray? {
        val data = ArrayList<Float>()
        data.add(0.45f) //设置圆心坐标
        data.add(0.45f)
        val angDegSpan = 360f / n
        var i = 0f
        while (i < 360 + angDegSpan) {
            data.add((radius * sin(i * Math.PI / 180f)).toFloat()+0.45f)
            data.add((radius * cos(i * Math.PI / 180f)).toFloat()+0.45f)
            i += angDegSpan
        }
        val f = FloatArray(data.size)
        for (i in f.indices) {
            f[i] = data[i]
        }
        return f
    }

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        super.onSurfaceCreated(gl, config)
        mCirclarVertexArray = VertexArray(mVerticesCircle!!)
        mCirclarVertexArray?.setVertexAttribPointer(
            0,
            mShaderProgram?.getPositionAttributeLocation()!!,
            Constant.POSITION_COMPONENT_COUNT,
            0
        )
    }

    override fun onDrawFrame(gl: GL10?) {
        super.onDrawFrame(gl)
        //绘制圆形
        GLES30.glUniform4f(mShaderProgram!!.getColorUniformLocation(), 0.0f, 0.0f, 1.0f, 0.5f)
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 0, mVerticesCircle?.size!! / 2);
    }
}

顶点着色器

roundrect_vertex_shader.glsl代码如下：

attribute vec4 a_Position;

void main()
{
    gl_Position = a_Position;
}

片元着色器

roundrect_fragment_shader.glsl代码如下：

precision mediump float;

void main()
{
	gl_FragColor = vec4(0.8, 0.5, 0.3, 1.0);
}

3、绘制圆角矩形

圆角矩形Renderer类

代码如下：

package com.example.roundrect.renderers

import android.content.Context
import android.opengl.GLES30
import com.example.roundrect.Constant
import com.example.roundrect.R
import com.example.roundrect.program.RoundRectShaderProgram
import com.opengllib.data.VertexArray
import javax.microedition.khronos.egl.EGLConfig
import javax.microedition.khronos.opengles.GL10
import kotlin.math.cos
import kotlin.math.sin

class CirclarRectRenderer(context: Context) : CirclarRenderer(context) {
    private val CIRLAR_COUNT = 100
    private val RADIUS = 0.05f
    private var mVertices = floatArrayOf(
        -0.5f, -0.8f,
        0.5f, 0.8f,
        -0.5f, 0.8f,

        -0.5f, -0.8f,
        0.5f, -0.8f,
        0.5f, 0.8f
    )

    init {
        mVerticesCircle = createCirclarRect(RADIUS, CIRLAR_COUNT)
    }

    fun createCirclarRect(radius: Float, n: Int): FloatArray? {
        val data = ArrayList<Float>()
        for (index in mVertices.indices) {
            data.add(mVertices[index])
        }
        //右圆形
        data.add(0.5f - radius) //设置圆心坐标
        data.add(0.85f - radius)
        val angDegSpan = 360f / n
        var i = 0f
        while (i < 360 + angDegSpan) {
            data.add((radius * sin(i * Math.PI / 180f)).toFloat() + (0.5f - radius))
            data.add((radius * cos(i * Math.PI / 180f)).toFloat() + (0.5f - radius))
            i += angDegSpan
        }
        //左圆形
        data.add(-0.5f + radius) //设置圆心坐标
        data.add(-0.8f + radius)
        val angDegSpanL = 360f / n
        var iL = 0f
        while (iL < 360 + angDegSpanL) {
            data.add((radius * sin(iL * Math.PI / 180f)).toFloat() + (-0.5f + radius))
            data.add((radius * cos(iL * Math.PI / 180f)).toFloat() + (-0.5f + radius))
            iL += angDegSpanL
        }
        data.add(-0.5f + radius) //设置圆心坐标
        data.add(0.8f - radius)
        val angDegSpanL2 = 360f / n
        var iL2 = 0f
        while (iL2 < 360 + angDegSpanL2) {
            data.add((radius * sin(iL2 * Math.PI / 180f)).toFloat() + (-0.5f + radius))
            data.add((radius * cos(iL2 * Math.PI / 180f)).toFloat() + (0.5f - radius))
            iL2 += angDegSpanL2
        }
        data.add(0.5f - radius) //设置圆心坐标
        data.add(-0.8f + radius)
        val angDegSpanR = 360f / n
        var iR = 0f
        while (iR < 360 + angDegSpanR) {
            data.add((radius * sin(iR * Math.PI / 180f)).toFloat() + (0.5f - radius))
            data.add((radius * cos(iR * Math.PI / 180f)).toFloat() + (-0.5f + radius))
            iR += angDegSpanR
        }
        val f = FloatArray(data.size)
        for (i in f.indices) {
            f[i] = data[i]
        }
        return f
    }

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES30.glClearColor(1.0f, 1.0f, 1.0f, 1.0f)
        mShaderProgram = RoundRectShaderProgram(
            mContext,
            R.raw.roundrect_vertex_shader,
            R.raw.roundrect_fragment_shader
        )
        mShaderProgram?.useProgram()

        mCirclarVertexArray = VertexArray(mVerticesCircle!!)
        mCirclarVertexArray?.setVertexAttribPointer(
            0,
            mShaderProgram?.getPositionAttributeLocation()!!,
            Constant.POSITION_COMPONENT_COUNT,
            0
        )
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        super.onSurfaceChanged(gl, width, height)
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        GLES30.glUniform4f(mShaderProgram!!.getColorUniformLocation(), 0.0f, 1.0f, 0.0f, 0.5f)
        //绘制矩形
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 0, 6)
        //绘制圆形
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 7, CIRLAR_COUNT)
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 7 + CIRLAR_COUNT + 2, CIRLAR_COUNT)
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 7 + CIRLAR_COUNT * 2 + 4, CIRLAR_COUNT)
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, 7 + CIRLAR_COUNT * 3 + 6, CIRLAR_COUNT)
    }
}

顶点着色器

roundrect_vertex_shader.glsl代码如下：

attribute vec4 a_Position;

varying vec2 vRectCoord;

void main()
{
    vRectCoord = vec2(a_Position.x, a_Position.y);
    gl_Position = a_Position;
}

片元着色器

roundrect_fragment_shader.glsl代码如下：

precision mediump float;
uniform vec4 u_Color;
varying vec2 vRectCoord;

void main()
{
    if(abs(vRectCoord.x) > 0.45 && abs(vRectCoord.y) > 0.75
     && sqrt(
     (abs(vRectCoord.x) -0.45)*(abs(vRectCoord.x) -0.45)
     + (abs(vRectCoord.y) -0.75)*(abs(vRectCoord.y) -0.75)
     ) > 0.05){
       gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    } else {
       gl_FragColor = u_Color;
    }
}

4、源码下载

Android OpenGL ES绘制矩形、圆形和圆角矩形演示demo源码下载地址：

https://download.youkuaiyun.com/download/github_27263697/90058907

参考文章

OpenGL ES之六——绘制矩形和圆形_gles20 画圆-优快云博客

使用OpenGL实现圆角效果-腾讯云开发者社区-腾讯云

[原]shader实现矩形圆角 - U_探索 - 博客园

Opengl: 使用glsl 将纹理处理成圆角的几种思路 - 连山In17 - 博客园

OpenGL抗锯齿实现详解
学习使你进步。
08-26 1143
为了解决这个问题，本文将介绍如何利用OpenGL提供的抗锯齿技术，使渲染结果更加平滑。本文介绍了如何使用OpenGL提供的抗锯齿技术，通过多重采样和抗锯齿纹理来平滑渲染结果的边缘。我们提供了完整的OpenGL抗锯齿实现代码，并详细地讲解了其中每一个步骤的作用。前者是通过多次取样同一像素的值来平滑边缘，而后者则是通过在图像的边缘处增加纹理来平滑边缘。通常情况下，抗锯齿纹理会在图像的周围绘制一圈透明度逐渐降低的纹理，从而消除锯齿的产生。下面我们将结合多重采样和抗锯齿纹理，提供一个完整的OpenGL抗锯齿实现。
如何使用OpenGL来绘制一个圆角矩形
zenny_chen的专栏
04-24 2456
iOS系统的流行带来了一阵圆角矩形的热风。许多设计狮与产品汪都对圆角矩形比较感冒，那作为程序猿该如何应付呢？ 幸好，当前无论是iOS还是Android系统，系统框架库都带了一些API能让我们比较便利地实现圆角矩形的功能。这里，笔者将利用OpenGL更底层的图形API来实现“磨圆”一个矩形的四个角，使得我们对圆角矩形有一个更理性的认识。
android openGl es2.0以画线的模式画成一个矩形 只有4条边中间透明
03-20
android openGl es2.0以画线的模式画成一个矩形 只有4条边中间透明
告别方角时代：Android自定义绘制实现优雅圆角效果的完整指南
最新发布
gitblog_00020的博客
10-07 443
在Android应用开发中，圆角设计已成为现代UI的标配元素。从按钮、图片到对话框，适当的圆角处理能显著提升界面的亲和力与精致感。本文将系统梳理圆角效果的实现方案，结合[awesome-android-ui](https://link.gitcode.com/i/f78ab185fe2d050a66ce9461a3f6aa47)项目中的优质资源，帮助开发者快速掌握圆角设计的核心技术。 ## 圆角...
一个简单的圆角矩形算法demo
01-07
vc一个简单的圆角矩形算法，带demo和实现算法！
绘制矩形_OpenGL ES for Android 绘制矩形和正方形
weixin_29100399的博客
01-14 256
前面的文章介绍了如何 绘制三角形 ，在OpenGL ES中没有直接绘制矩形的方式，通过绘制2个三角形的方式绘制矩形。绘制矩形的顶点shader：attribute vec4 vPosition; void main() { gl_Position = vPosition; }绘制矩形的片段shader：precision mediump float; void main() { gl...
opengl 实现圆角矩形
weixin_34024034的博客
12-25 1218
为什么80%的码农都做不了架构师？>>> ...
精选资源
Android OpenGL ES绘制圆角矩形演示demo源码
11-29
Android OpenGL ES绘制圆角矩形演示demo源码 绘制圆角，详解见...
Android硬件加速原理详解与实战应用
在App开发中，比如实现圆角矩形按钮，有使用PNG图片（BitmapDrawable）和代码（ShapeDrawable）两种方法。PNG图片方案虽然图像清晰，但解码过程消耗CPU资源，占用内存大，绘制效率较低。相比之下，代码实现通过Shape...
【Android绘图API实践】：如何在QQ登录界面绘制图标与背景
[【Android绘图API实践】：如何在QQ登录界面绘制图标与背景](https://community.appinventor.mit.edu/uploads/default/original/3X/6/2/62164495a674fdf50ab8d12b02b9a70e8fa89390.png) # 摘要 本文系统地介绍了...
iOS核心动画高级技术详解
- CAEAGLLayer：与OpenGL ES结合使用。 - AVPlayerLayer：播放视频内容。 7. **隐式动画**： - 事务：图层属性更改默认伴随动画。 - 完成块：动画结束后执行的代码。 - 图层行为：定义图层在动画中的行为。 -...
openGL画矩形
03-23
openGL画矩形 简单的使用的代码
opengl的鼠标画线，圆，矩形，还有个菜单，很适合opengl初学者学习
11-30
opengl的鼠标画线，圆，矩形，还有个菜单，很适合opengl初学者学习
Android OpenGL入门示例:绘制三角形和正方形
06-11
Android OpenGL入门示例:绘制三角形和正方形，详见博文: http://blog.youkuaiyun.com/yanzi1225627/article/details/30096181
[Android] OpenGL ES 绘制矩形以及加载 Bitmap 图片
09-12 3330
绘制矩形 OpenGL ES 所有的多边形图形都是由多个三角形拼成的，所以我们在上一篇文章的基础上进行矩形的绘制。矩形即为两个直角三角形构成的，我们可以通过定义四个顶点然后按一定顺序去进行两个三角形的绘制。最简单的方法就是跟绘制三角形一样定义好顶点我们通过 glVertexAttribPointer(int indx, int size, int type, boolean normalized...
Android 中使用OpenGL ES进行2D开发（绘制矩形）
易水寒
04-30 4570
必须要先回顾下这张图，我们可以定义6个点，每3个点组成一个三角形，两个三角形组成一个矩形，但是搞计算机的总是懒或者说不喜欢重复的东西，我们也可以定义4个点，如右边的图案，V1，V2，V3组成一个三角形，然后V1，V3，V4组成另外一个三角形。 因为定义了4个点，所以我们需要更多的空间来储存来存储点了。下面是跟三角形代码不同的地方，用红色标出了。 ByteBuffer byteBuffe
android游戏开发（OpenGL ES绘制矩形平面）
欢迎访问alvinxu的博客页面
04-15 1712
接触android将近一年了，以前学的应用开发，现在自学android游戏开发，把自己学到的分享出来一下，（这也是我的第一篇博客），不说废话了，开始正文： GLRender类： package com.example.xu.vertexdraw; public class GLRender implements GLSurfaceView.Renderer { public fl
Android OpenGL 教程——窗口初始化&绘制矩形
xyTianZhao
07-24 764
上节介绍了，但是我们的窗口什么都没有，这节我们将 NativeActivity 创建的 window 绑定到 OpenGL 创建的 display 的 surface 上，并且绘制背景颜色和三角形，通过三角形绘制出一个矩形。
用openGL ES绘制圆角矩形的实现
DevFun
03-11 8228
不废话，直接上代码//调用部分 RoundRect( 200, /* x */ 400, /* y */ 400, /* width */ 300, /* height */ 25, /* Corner radius, at least less than 140? */ 64 /*
Android OpenGL ES入门：绘制图形详解与使用步骤
本文将深入探讨Android OpenGl绘制简单图形的实现示例，以及如何在Android开发中应用OpenGL ES。首先，让我们明确五个关键问题（W与H）来理解OpenGL的基本概念： 1. **What (什么是)** - OpenGL（开放图形库）是一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闲暇部落

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值