1. 程式人生 > >OpenGL ES2.0實現文字繪製Android

OpenGL ES2.0實現文字繪製Android

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

最後的效果圖如下所示