OpenGLES2.0学习笔记(三)字符文字的绘制

        经过一段时间的学习,我发现OpenGL是不支持字符绘制的,就是官方的API没有字符绘制的方法。但是如果有字符绘制的需求,还是有别的办法来实现,那就是把字符转换成图片,然后通过渲染纹理的方式把图片绘制出来。老规矩,先上效果图:

OpenGLES字符绘制

顶点shader:

uniform mat4 vMatrix;

attribute vec4 vPosition;

attribute vec2 vTextureCoordinate;

varying vec2 aTextureCoordinate;

void main() {    

    aTextureCoordinate = vTextureCoordinate;   

    gl_Position = vMatrix * vPosition;

}

片段shader:

precision mediump float;

uniform sampler2D u_TextureUnit;

varying vec2 aTextureCoordinate;

void main() {

    gl_FragColor = texture2D(u_TextureUnit, aTextureCoordinate);

}

模型绘制类:

public class TextureModel {

    private int programId;

    private float[] matrix = new float[16];

    private int glHMatrix;

    private int glHPosition;

    private int glHCoordinates;

    private int glHTexture;

    private FloatBuffer bufPos;

    private FloatBuffer bufCoord;

    private Bitmap bitmap;

    private int[] textureId = new int[1];

    private final float[] sCoord = { 0.0f, 0.0f, 0f, 0.0f, 1.0f, 0f, 1.0f, 0.0f, 0f, 1.0f, 1.0f, 0f };

    public TextureModel(){

        Matrix.setIdentityM(matrix, 0);

        bufCoord = GlUtil.createFloatBuffer(sCoord);

    }

    public float[] getMatrix() { return matrix; }

    public void createProgram(){

        programId = GlUtil.createProgram(ResReadUtils.readResource(R.raw.texture_vertex_shader), ResReadUtils.readResource(R.raw.texture_fragment_shader));

        glHMatrix = GLES20.glGetUniformLocation(programId, "vMatrix");

        glHPosition = GLES20.glGetAttribLocation(programId, "vPosition");

        glHCoordinates = GLES20.glGetAttribLocation(programId, "vTextureCoordinate");

        glHTexture = GLES20.glGetUniformLocation(programId, "u_TextureUnit");

    }

    public void setBitmap(Bitmap bitmap) { this.bitmap = bitmap; }

    public void createTexture(){

        if (bitmap!=null && !bitmap.isRecycled()) {

            GLES20.glGenTextures(1, textureId, 0);

            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId[0]);

            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR_MIPMAP_LINEAR);

            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR_MIPMAP_LINEAR);

            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);   

             GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

            GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

            GLES20.glGenerateMipmap(GLES20.GL_TEXTURE_2D);

            bitmap.recycle();

            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);

        }

    }

    public void setDrawPosition(float[] position){

        if (position==null || position.length!=12) { return; }

        bufPos = GlUtil.createFloatBuffer(position);

    }

    public void deleteTexture(){

        GLES20.glDeleteTextures(programId, textureId, 0);

    }

    public void drawSelf(){

        GLES20.glUseProgram(programId);

        GLES20.glUniformMatrix4fv(glHMatrix, 1, false, matrix, 0);

        GLES20.glEnableVertexAttribArray(glHPosition);

        GLES20.glEnableVertexAttribArray(glHCoordinates);

        GLES20.glUniform1i(glHTexture, 0);

        createTexture();

        GLES20.glVertexAttribPointer(glHPosition, 3, GLES20.GL_FLOAT, false, 0, bufPos);

        GLES20.glVertexAttribPointer(glHCoordinates, 3, GLES20.GL_FLOAT, false, 0, bufCoord);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);

        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId[0]);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

        GLES20.glDisableVertexAttribArray(glHPosition);

        GLES20.glDisableVertexAttribArray(glHCoordinates);

    }

现在需要传入字符的图片和坐标位置:

Paint paint =new Paint();

paint.setAntiAlias(true);

paint.setColor(Color.RED);

paint.setStyle(Paint.Style.FILL);

paint.setTextSize(100f);

String text ="测试字符串!";

int textWidth = (int) paint.measureText(text, 0, text.length());

Paint.FontMetrics fm = paint.getFontMetrics();

float textHeight =  fm.bottom - fm.top + fm.leading;;

Bitmap bitmap = Bitmap.createBitmap(textWidth, (int)textHeight, Bitmap.Config.ARGB_8888);

Canvas canvas =new Canvas(bitmap);

canvas.drawText(text, 0, textHeight-fm.bottom, paint);

glSurfaceView.setTexture(bitmap);

RenderFilter调用方法:

public void setTextureBitmap(Bitmap bitmap){

    float[] pos = {

            0f, 0f, 10f,

            0f, 0f, 0f,

            0f, 10f, 10f,

            0f, 10f, 0f

    };

    textureModel.setDrawPosition(pos);

    textureModel.setBitmap(bitmap);

}

运行起来看看效果:

运行效果

咦?怎么是白底的呢,难道生成的位图就是白底的?打个断点看看

断点调试

从断点来看,生成的bitmap是透明的啊???那肯定是OpenGLES绘制的问题,为什么透明的绘制不出来,变成了白色的呢?

于是,百度一下,还真找到问题了:Android 使用opengles 设置背景透明

在onSurfaceCreated方法增加两行代码就搞定!

@Override

public void onSurfaceCreated(GL10 gl, EGLConfig config) {

    GLES20.glEnable(GLES20.GL_DEPTH_TEST);

    //就是下面这两行

    GLES20.glEnable(GLES20.GL_BLEND);

    GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);

    renderFilter.createProgram();

}

再运行起来看看效果,OK,收工!!!

透明底字符绘制
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容