OpenGL ES2.0實現文字繪製Android
阿新 • • 發佈:2018-12-15
OpenGL ES2.0是無法直接繪製文字的,我採用的方法是將文字轉為Bitmap,然後以圖貼的方式進行渲染。看到網上也有人是將文字生成點,一個個進行繪製的,個人覺得這種方法還是挺麻煩的。文章分為兩部分,一部分是在canvas中繪圖轉Bitmap,第二部分是貼圖紋理繪製。
文字轉Bitmap
這部分比較麻煩,網上介紹的canvas.drawText()的資料太多,看了都讓人一頭霧水,我也看了一天才明白。
- 基於文字的樣式和大小,動態獲取佔用的寬度和高度
Paint p = new Paint(); p.setColor(glText.color); p.setTypeface(glText.font); p.setTextSize(glText.size); //獲取高度 Paint.FontMetricsInt metrics = p.getFontMetricsInt(); int height=metrics.bottom-metrics.top; //獲取寬度 Rect rect=new Rect(); p.getTextBounds(glText.text, 0, glText.text.length(), rect); int width = rect.width();//文字的寬度
- 根據文字大小生成對應大小的Bitmap,如果統一Bitmap大小會出現文字變形和失真的現象。
//根據文字高度寬度生成bitmap
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
- 根據文字大小生成對應的OpenGL繪製矩形座標範圍大小
float mHeight=RADIO*this.height; float mWidth=RADIO*this.width; return new GLRectangle(glPoint, new GLPoint(glPoint.getX(),glPoint.getY()+mHeight), new GLPoint(glPoint.getX()+mWidth,glPoint.getY()+mHeight) );
- 繪製背景色和文字,drawText()中的x,y設定比較麻煩,設定不正確容易文字顯示不全,這裡我採用的是
if (glText.backGroundColor != 0) {
//如果有背景色就繪製背景色
canvas.drawColor(glText.backGroundColor);
}
canvas.drawText(glText.text, 0,-metrics.ascent, p);
canvas.save();
OpenGL渲染繪製紋理圖片
頂點著色器
final static String VERTEX = "uniform mat4 u_Matrix;" + "attribute vec4 a_Position;" + "attribute vec2 a_TextureCoordinates;" + "varying vec2 v_TextureCoordinates;" + "void main()" + "{" + " gl_Position = u_Matrix * a_Position;" + " v_TextureCoordinates = a_TextureCoordinates;" + "}";
片元著色器
final static String FRAGMENT =
"precision mediump float;" +
"uniform sampler2D u_TextureUnit;" +
"varying vec2 v_TextureCoordinates;" +
"void main()" +
"{" +
" gl_FragColor = texture2D(u_TextureUnit, v_TextureCoordinates); \t\t\n" +
"}";
處理點資料
vertexData = ByteBuffer
.allocateDirect(data.length * BYTES_PER_FLOAT)
.order(ByteOrder.nativeOrder()).asFloatBuffer();
vertexData.put(data);
pointCount = 4;
STRIDE = (POSITION_COMPONENT_COUNT + TEXTURE_COORDINATES_COMPONENT_COUNT) * BYTES_PER_FLOAT;
//開啟顏色混合,解決圖片背景黑色問題
glEnable(GL_BLEND);
// glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
glPixelStorei(GL_UNPACK_ALIGNMENT,1);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
vertexShader = ShaderHelper.compileVertexShader(ShaderCode.VERTEX);
fragmentShader = ShaderHelper
.compileFragmentShader(ShaderCode.FRAGMENT);
program = ShaderHelper.linkProgram(vertexShader, fragmentShader);
glUseProgram(program);
aPositionLocation = glGetAttribLocation(program, A_POSITION);
uMatrixLocation = glGetUniformLocation(program, U_MATRIX);
uTextureUnitLocation = glGetUniformLocation(program, U_TEXTURE_UNIT);
aTextureCoordinatesLocation = glGetAttribLocation(program, A_TEXTURE_COORDINATES);
storeImage(bitmap);
glUniform1i(uTextureUnitLocation, 0);
vertexData.position(0);
glVertexAttribPointer(aPositionLocation, POSITION_COMPONENT_COUNT, GL_FLOAT,
false, STRIDE, vertexData);
glEnableVertexAttribArray(aPositionLocation);
vertexData.position(POSITION_COMPONENT_COUNT);
glVertexAttribPointer(aTextureCoordinatesLocation, TEXTURE_COORDINATES_COMPONENT_COUNT, GL_FLOAT,
false, STRIDE, vertexData);
glEnableVertexAttribArray(aTextureCoordinatesLocation);
//材質紋理處理
protected static void storeImage(Bitmap bitmap) {
int[] texture = new int[1];
glGenTextures(1, texture, 0);
glActiveTexture(GLES20.GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture[0]);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
glGenerateMipmap(GL_TEXTURE_2D);
bitmap.recycle();
}
//設定投影轉換
glUniformMatrix4fv(uMatrixLocation, 1, false, matrix, 0);
glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
最後的效果圖如下所示