文档章节

渲染图片

梦想游戏人
 梦想游戏人
发布于 2016/03/23 22:07
字数 360
阅读 20
收藏 0


原理:

在一个矩形上面使用2D纹理贴图 从而显示图片

GL只识别bitmap 所以 jpeg png等格式要解码为bitmap 才能直接生成纹理->渲染

下面是Lite2D Text 渲染freetype生成的bitmap 字体的实现

void Text::draw()
{

	if (this->_is_need_update)
	{//need sync string
		this->clear();
		this->updateString();
		this->_is_need_update = false;
	}
	if (this->_is_need_update_color)
	{//need sync color
		this->updateColor();
		this->_is_need_update_color = false;
	}


	float width = 0;
	float height = 0;
//deal with each font with string 
	for (int i = 0; i < _queue.size(); i++)
	{
		CharBitMap*bitmap = _queue[i];


		glLoadIdentity();// vetex can work once

		glBindTexture(GL_TEXTURE_2D, bitmap->texture_id);

		// able alpha blend for the texture who has alpha
		glEnable(GL_BLEND);
		glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
		//able opacity
		glEnable(GL_ALPHA_TEST);
		glAlphaFunc(GL_GREATER, 0.0f);
		glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);


		//start to render

		glBegin(GL_QUADS);

		//fix bug of transform of difference window size

		Vec2 windowsize = Director::getInstance()->getWindowSize();

		float xx = -1.0f; //position
		float yy = -1.0f;

		float scaleX = this->getGlobalScale().x; //scale
		float scaleY = this->getGlobalScale().y;

		float imageWidth = bitmap->width / windowsize.x;
		float imageHeight = bitmap->height / windowsize.y;
	
		float x, y;
		if (i >= 1)
		{
			width += (_queue[i - 1]->width + _queue[i]->width) / 2.0f;
			width += _fontsize*0.05f;
		}
		else
		{

			width += _queue[i]->width / 2.0f;
		}
		if (_queue[i]->_char <= 0xff)
		{
			height = _queue[i]->height / 2.0f + _fontsize*0.08F;
		}
		else
		{
			height = _fontsize / 2.0f;

		}
		height -= _fontsize *0.08;




		// transform position with inner anchor point
		x = (this->getGlobalPosition().x + width - _rect.x*_anchor.x) / windowsize.x * 2.0f
			+ imageWidth - (0.5)*imageWidth * 2.0f;

		y = (this->getGlobalPosition().y + height-_fontsize*_anchor.y*0.71// - (_anchor.y)*height * 2.0f) 
			)/windowsize.y * 2.0f + imageHeight - (0.5)*imageHeight * 2.0f;

		xx += x;
		yy += y;

		//for different image has different Texcoord
		float _coord2f[] = { 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f };


		//	glPushMatrix();


		// transform the vertexs
		glTexCoord2f(_coord2f[0], _coord2f[1]); glVertex2f(-imageWidth*scaleX + xx, -imageHeight*scaleY + yy);
		glTexCoord2f(_coord2f[2], _coord2f[3]); glVertex2f(imageWidth*scaleX + xx, -imageHeight *scaleY + yy);
		glTexCoord2f(_coord2f[4], _coord2f[5]); glVertex2f(imageWidth*scaleX + xx, imageHeight*scaleY + yy);
		glTexCoord2f(_coord2f[6], _coord2f[7]); glVertex2f(-imageWidth*scaleX + xx, imageHeight*scaleY + yy);



		//glPopMatrix();

		glDisable(GL_BLEND);
		glDisable(GL_ALPHA_TEST);


		glEnd();
	}
	Node::draw();

}


© 著作权归作者所有

上一篇: 旋转缓存的设计
下一篇: 渲染Freetype2字体
梦想游戏人
粉丝 41
博文 472
码字总数 184853
作品 0
成都
私信 提问
小程序 随机读取数据并生成分享图片 上手笔记

效果图如下,用户每次点击分享图片的时候,从内容库中随机抽出一条数据,渲染在图片上,并且加上用户昵称和头像,用户可以保存到本地。 功能不难,但是有一些小细节,还是列出来记录下吧。 ...

愚坤
07/25
0
0
探讨iOS 中图片的解压缩到渲染过程

一.图像从文件到屏幕过程 通常计算机在显示是CPU与GPU协同合作完成一次渲染.接下来我们了解一下CPU/GPU等在这样一次渲染过程中,具体的分工是什么? CPU: 计算视图frame,图片解码,需要绘制纹...

_小迷糊
03/12
0
0
React 动态渲染图片,提升用户体验

本文作者:Andrew Wong 翻译原文:http://huziketang.com/blog/posts/detail?postId=58d14215a6d8a07e449fdd2b 英文连接:Improve Your UX by Dynamically Rendering Images via React 市场上......

胡子大哈
2017/03/21
0
0
Metal入门教程(八)Metal与OpenGL ES交互

前言 Metal入门教程(一)图片绘制 Metal入门教程(二)三维变换 Metal入门教程(三)摄像头采集渲染 Metal入门教程(四)灰度计算 Metal入门教程(五)视频渲染 Metal入门教程(六)边界检测...

落影loyinglin
2018/08/10
0
0
使用 iOS OpenGL ES 实现长腿功能

本文介绍了如何使用 OpenGL ES 来实现长腿功能。学习这个例子可以加深我们对纹理渲染流程的理解。另外,还会着重介绍一下「渲染到纹理」这个新知识点。 警告: 本文属于进阶教程,阅读前请确...

雷曼同学
03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

006-Docker中导出单个或多个tar包

docker中导出单个镜像和多个镜像的tar包 docker save [images] > [name.tar] docker save [images] [images] > [name.tar]...

伟大源于勇敢的开始
今天
6
0
Kotlin基础语法学习

安装好安卓studio,以及插件支持Kotlin 就可以在创建项目的时候选择 Kotlin语言了。 https://www.jianshu.com/p/4ab13691d681 参考手册: https://www.runoob.com/kotlin/otlin-android-setu...

T型人才追梦者
今天
4
0
java实现简单计算器

1.概述 之前作者写过一篇文章,也是关于计算器的,用的是C++与Qt,链接在这里 这次用java的swing写的(这差距好像有点大,好吧是qt太强了). 先上图: 2.UI 总体布局使用流布局. (1)文本框 文本框就...

Blueeeeeee
今天
4
0
纯CSS实现DIV悬浮(固定位置)

纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下: 实现代码: <!DOCTYPE html> <html> <head> <meta ...

独钓渔
今天
6
0
OSChina 周二乱弹 —— 给我来个女菩萨

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐#分享XXXTENTACION/Travis Barker的单曲《Pain = BESTFRIEND》: 《Pain = BESTFRIEND》- XXXTENTACION/...

小小编辑
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部