android 绘制图形按钮,绘制形状 | Android 开发者 | Android Developers

使用 OpenGL 定义要绘制的形状后，您可能想要绘制它们。使用 OpenGL ES 2.0 绘制形状所需的代码比您想象的要多，因为该 API 可以很好地控制图形渲染管道。

本课介绍了如何使用 OpenGL ES 2.0 API 绘制您在上一课中定义的形状。

初始化形状

在进行任何绘制之前，您必须初始化并加载您打算绘制的形状。除非您在程序中使用的形状结构(原始坐标)在执行过程中发生变化，否则应该在渲染程序的

Kotlin

class MyGLRenderer : GLSurfaceView.Renderer {

...

private lateinit var mTriangle: Triangle

private lateinit var mSquare: Square

override fun onSurfaceCreated(unused: GL10, config: EGLConfig) {

...

// initialize a triangle

mTriangle = Triangle()

// initialize a square

mSquare = Square()

}

...

}Java

public class MyGLRenderer implements GLSurfaceView.Renderer {

...

private Triangle mTriangle;

private Square mSquare;

public void onSurfaceCreated(GL10 unused, EGLConfig config) {

...

// initialize a triangle

mTriangle = new Triangle();

// initialize a square

mSquare = new Square();

}

...

}

绘制形状

使用 OpenGL ES 2.0 绘制定义的形状需要大量代码，因为您必须向图形渲染管道提供大量详细信息。具体来说，您必须定义以下内容：

顶点着色程序 - 用于渲染形状的顶点的 OpenGL ES 图形代码。

片段着色程序 - 用于使用颜色或纹理渲染形状面的 OpenGL ES 代码。

程序 - 包含您希望用于绘制一个或多个形状的着色程序的 OpenGL ES 对象。

您至少需要一个顶点着色程序绘制形状，以及一个 Fragment 着色程序为该形状着色。您还必须对这些着色程序进行编译，然后将其添加到之后用于绘制形状的 OpenGL ES 程序中。以下示例展示了如何定义可用于绘制 Triangle 类中的形状的基本着色程序：

Kotlin

class Triangle {

private val vertexShaderCode =

"attribute vec4 vPosition;" +

"void main() {" +

" gl_Position = vPosition;" +

"}"

private val fragmentShaderCode =

"precision mediump float;" +

"uniform vec4 vColor;" +

"void main() {" +

" gl_FragColor = vColor;" +

"}"

...

}Java

public class Triangle {

private final String vertexShaderCode =

"attribute vec4 vPosition;" +

"void main() {" +

" gl_Position = vPosition;" +

"}";

private final String fragmentShaderCode =

"precision mediump float;" +

"uniform vec4 vColor;" +

"void main() {" +

" gl_FragColor = vColor;" +

"}";

...

}

着色程序包含 OpenGL 着色语言 (GLSL) 代码，必须先对其进行编译，然后才能在 OpenGL ES 环境中使用。要编译此代码，请在您的渲染程序类中创建一个实用程序方法：

Kotlin

fun loadShader(type: Int, shaderCode: String): Int {

// create a vertex shader type (GLES20.GL_VERTEX_SHADER)

// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)

return GLES20.glCreateShader(type).also { shader ->

// add the source code to the shader and compile it

GLES20.glShaderSource(shader, shaderCode)

GLES20.glCompileShader(shader)

}

}Java

public static int loadShader(int type, String shaderCode){

// create a vertex shader type (GLES20.GL_VERTEX_SHADER)

// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)

int shader = GLES20.glCreateShader(type);

// add the source code to the shader and compile it

GLES20.glShaderSource(shader, shaderCode);

GLES20.glCompileShader(shader);

return shader;

}

要绘制形状，您必须编译着色程序代码，将它们添加到 OpenGL ES 程序对象中，然后关联该程序。该操作需要在绘制对象的构造函数中完成，因此只需执行一次。

注意：就 CPU 周期和处理时间而言，编译 OpenGL ES 着色程序及关联程序的成本非常高，因此应避免多次执行该操作。如果您在运行时不清楚着色程序的内容，则应编译代码，使其仅被创建一次，然后缓存以备后用。

Kotlin

class Triangle {

...

private var mProgram: Int

init {

...

val vertexShader: Int = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode)

val fragmentShader: Int = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode)

// create empty OpenGL ES Program

mProgram = GLES20.glCreateProgram().also {

// add the vertex shader to program

GLES20.glAttachShader(it, vertexShader)

// add the fragment shader to program

GLES20.glAttachShader(it, fragmentShader)

// creates OpenGL ES program executables

GLES20.glLinkProgram(it)

}

}

}Java

public class Triangle() {

...

private final int mProgram;

public Triangle() {

...

int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,

vertexShaderCode);

int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,

fragmentShaderCode);

// create empty OpenGL ES Program

mProgram = GLES20.glCreateProgram();

// add the vertex shader to program

GLES20.glAttachShader(mProgram, vertexShader);

// add the fragment shader to program

GLES20.glAttachShader(mProgram, fragmentShader);

// creates OpenGL ES program executables

GLES20.glLinkProgram(mProgram);

}

}

此时，您可以添加绘制形状的实际调用。使用 OpenGL ES 绘制形状时，您需要指定多个参数，以告知渲染管道您要绘制的形状以及如何进行绘制。由于绘制选项因形状而异，因此最好使您的形状类包含自身的绘制逻辑。

创建用于绘制形状的 draw() 方法。此代码将位置和颜色值设置为形状的顶点着色程序和 Fragment 着色程序，然后执行绘制功能。

Kotlin

private var positionHandle: Int = 0

private var mColorHandle: Int = 0

private val vertexCount: Int = triangleCoords.size / COORDS_PER_VERTEX

private val vertexStride: Int = COORDS_PER_VERTEX * 4 // 4 bytes per vertex

fun draw() {

// Add program to OpenGL ES environment

GLES20.glUseProgram(mProgram)

// get handle to vertex shader's vPosition member

positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition").also {

// Enable a handle to the triangle vertices

GLES20.glEnableVertexAttribArray(it)

// Prepare the triangle coordinate data

GLES20.glVertexAttribPointer(

it,

COORDS_PER_VERTEX,

GLES20.GL_FLOAT,

false,

vertexStride,

vertexBuffer

)

// get handle to fragment shader's vColor member

mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor").also { colorHandle ->

// Set color for drawing the triangle

GLES20.glUniform4fv(colorHandle, 1, color, 0)

}

// Draw the triangle

GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount)

// Disable vertex array

GLES20.glDisableVertexAttribArray(it)

}

}Java

private int positionHandle;

private int colorHandle;

private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;

private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

public void draw() {

// Add program to OpenGL ES environment

GLES20.glUseProgram(mProgram);

// get handle to vertex shader's vPosition member

positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

// Enable a handle to the triangle vertices

GLES20.glEnableVertexAttribArray(positionHandle);

// Prepare the triangle coordinate data

GLES20.glVertexAttribPointer(positionHandle, COORDS_PER_VERTEX,

GLES20.GL_FLOAT, false,

vertexStride, vertexBuffer);

// get handle to fragment shader's vColor member

colorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

// Set color for drawing the triangle

GLES20.glUniform4fv(colorHandle, 1, color, 0);

// Draw the triangle

GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

// Disable vertex array

GLES20.glDisableVertexAttribArray(positionHandle);

}

将所有的代码编译完成之后，只需从渲染程序的 draw() 方法即可绘制此对象：

Kotlin

override fun onDrawFrame(unused: GL10) {

...

triangle.draw()

}Java

public void onDrawFrame(GL10 unused) {

...

triangle.draw();

}

运行应用时，它应如下所示：

图 1. 没有使用投影或相机视图绘制的三角形。

此代码示例存在一些问题。首先，它不会给您的好友留下深刻的印象。其次，当您更改设备的屏幕方向时，该三角形会稍微有些变窄和变形。形状偏斜的原因在于，对象的顶点尚未针对显示

最后，三角形是静止的，这有些无聊。在添加动画课程中，您可以使该形状旋转，并利用 OpenGL ES 图形管道完成更加有趣的操作。