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,收工!!!

透明底字符绘制
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容