OpenGL ES 实现刮刮卡和手写板功能

最新推荐文章于 2022-09-06 07:50:38 发布
最新推荐文章于 2022-09-06 07:50:38 发布
阅读量2.5k 收藏 3
点赞数 2
分类专栏： OpenGL ES 3.0 文章标签： opengl android ndk 图形学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kennethdroid/article/details/106339286
版权
本文介绍了如何使用OpenGL ES在Android上实现刮刮卡和手写板功能。通过构建带状网格和纹理映射，根据手指滑动坐标创建图形，并利用模板测试避免重复绘制，从而提高性能。文章详细讲解了利用OpenGL处理滑动轨迹的原理和实现步骤，包括矩形和半圆的顶点坐标计算，以及在Native层构建网格的逻辑。
摘要由CSDN通过智能技术生成

该原创文章首发于微信公众号：字节流动

刮刮卡效果

刮刮卡效果实现原理

其实利用 Android Canvas 实现类似刮刮卡或者手写板功能比较方便，通过自定义 View 绘制 2 个图层，位于上层的图层在手指划过的位置将透明度置为 0 ，这样下层图层的颜色便可以显示出来。

不过话又说回来，Android Canvas 实现类似刮刮卡功能虽然方便，但是性能一言难尽，通常在复杂的应用界面不宜采用此类方法，此时就不得不考虑使用 OpenGL 进行优化。

本文尝试使用 OpenGL 来实现类似刮刮卡的功能，简而言之就是**利用 OpenGL 根据手指滑动的坐标去构建一条一条的带状网格，然后基于此网格实现纹理映射。**为了使带状图形（网格）看起来平滑自然，我们还需要在起点和终点位置构建 2 个半圆，使滑动轨迹看起来平滑自然。

实现原理图

我们基于 2 点之间滑动轨

了解本专栏 订阅专栏 解锁全文 超级会员免费看
字节流动
关注
专栏目录
订阅专栏
OpenGL ES之深入解析如何实现“手写绘画板”
╰つ栺尖篴夢ゞ
09-09 1万+
绘制曲线 一、绘制曲线连接的点 在 OpenGL ES 中绘制曲线的方式，就是将曲线拆分成点序列来绘制。 因为要绘制点，所以采取的是点图元 。即要把顶点数据当成点来绘制，并且每个点都要绘制出笔触的纹理。关键步骤如下： 指定图元类型 // 绘制前切换 Viewport glViewport(0, 0, [self drawableWidth], [self drawableHeight]); glBindFramebuffer(GL_FRAMEBUFFER, self.frameBuff
毛笔效果简单思路
热门推荐
::: 移动互联网时代开发者 :::
02-22 1万+
<br /> <br /><br />任何画线的程序，都是先在界面上获取若干不连续的点，然后将这些点连成线。<br /><br /><br />一些常见的笔型比较好实现，比如说铅笔、钢笔等等，这类笔型的线条的宽度和线条的颜色是固定的，只需要将点连接成固定颜色和固定宽度的线即可。<br /><br /><br />毛笔是比较特殊的笔型，要实现好毛笔效果，有几点比较特殊，需要考虑。<br />1. 同一笔画内，线条各处的粗细不同。<br />2. 同一笔画内，线条各处的透明度不同。<br />3. 有笔锋效果。
swift-压感效果贝塞尔曲线绘制OpenGL笔触效果完美手写
08-15
UIBezierPath这个类在UIKit中， 是Core Graphics框架关于path的一个封装，使用此类可以定义简单的形状，比如我们常用到，矩形，圆形，椭圆，弧，或者不规则的多边形。
Cocos2dx3.5 opengl方式制作屏幕写字板
u011040361的专栏
05-13 505
通过重写draw函数，来实现根据手势划线的功能，代码一看就能明白#ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__#include "cocos2d.h" USING_NS_CC; struct Line { Vec2 p1; Vec2 p2; };class HelloWorld : public cocos2
OpenGL ES之手写绘画板.zip
09-09
OpenGL ES之手写绘画板：详细的实现了PaintView的画笔的颜色、尺寸、笔触等设定切换，并运用OpenGL ES自定义着色器实现画板曲线的绘制，并实现了重做、重绘、橡皮擦、撤销、清除等逻辑的实现。
利用OpenGL渲染写出毛笔字的算法
10-13
一个做毛笔模拟的小程序，对于非真实感图形学很有用 利用VC++实现，调用opengl的库进行渲染 （网络转载，非本人原创，并向原作者致敬）
在iOS中使用OpenGL ES实现绘画板的方法
08-19
主要介绍了在iOS中使用OpenGL ES实现绘画板的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android实现手写板功能
戴戴的博客
08-23 1515
自定义Android手写签名组件，并进行手写区域裁剪 使用方法： /** * 初始化视图，将手写版添加到布局中 */ private void initView() { mDrawView = new DrawView(this); LinearLayout layout;// layout中挂载的一个布局，用来加载手写板 ViewGroup.LayoutParams layoutParams = new ViewGrou
Android基于OpenGL的GLSurfaceView创建一个Activity实现方法
09-01
主要介绍了Android基于OpenGL的GLSurfaceView创建一个Activity实现方法,结合实例形式分析了Android中OpenGL图形操作类GLSurfaceView的功能、用法及相关使用技巧,需要的朋友可以参考下
OpenGL实现的毛笔字算法。
06-05
OpenGL实现的毛笔字算法。
swift-MaLiang是一个基于OpenGLES的涂鸦库支持自定义画笔纹理线条粗细颜色等。
08-15
神笔马良有一支神笔。MaLiang 是一个基于 OpenGL ES 的涂鸦库，支持自定义画笔纹理、线条粗细、颜色等。
ZenBrush(禅宗画笔)反编译后二次开发（电子签名_毛笔带笔锋的效果）
12-07
具体详情见http://blog.csdn.net/zhouyuanjing/article/details/78743538 开发时注意看ReadMe.txt 1. MyZenBrush目录：在ZenBrush上移植书写毛笔效果 2. MyZenBrush_ESCPrinter目录：在ZenBrush上移植书写毛笔效果，并且支持ESCPrinter打印 3. ZenBrush目录：反编译后smali/jp/co/psoft下的smail文件，替换上面生成apk后反编译的相应的文件 自己的代码生成apk，需要反编译自己的apk，同时需要用ZenBrush_smail里的smali/jp/co/psoft替换自己的对应目录，然后回编，签名
Android OpenGL ES分小块贴图并画点画线（10x10矩形）
07-05
Android贴图、在此基础上画点，画线。贴图分为10x10矩形
IOS离屏渲染OpenGLES(七)
翻肚鱼儿的博客
11-04 661
前言 前面我们知道，在将渲染结果从帧缓冲区呈现到屏幕上之前，可以多次调用glDrawArrays()函数进行多次渲染。那么如果想对一张图片加饱和度，加对比度等等效果，将如何做呢？一种思路是在片元着色器中对获取到的纹理图片的颜色增加饱和度和对比度，最后将处理后的结果赋值给gl_FragColor，这是一个思路，但是这显然这种做法可能并不友好，不是一种好的设计模式。另外的思路就是利用离屏渲染，所谓离屏渲染，对纹理处理的中间过程(比如加饱和度，对比度等等)并不需要显示到屏幕上的渲染，就称为离屏渲染。加载一张纹理
使用Canvas + Path和“曲面细分”算法实现钢笔笔锋效果
轮子初级玩家
07-05 7923
本文用于在无法获取压感的设备上实现书法效果，因此所有的书写效果的笔触粗细变化，均是通过速率进行确认。最后实现效果如下（不会书法，只能让大家体会一下效果），代码基于之前的文章https://blog.csdn.net/cjzjolly/article/details/88661286上进行修改而成： 一、推导： 在正常的情况下，使用Canvas和Path分段绘制用户的书写结果时...
WPF Canvas 平滑笔迹
dotNET跨平台
09-06 338
WPF Canvas 平滑笔迹控件名：CanvasHandWriting作者：小封（邝攀升）原文链接： https://github.com/WPFDevelopersOrg/WPFDevelopers编辑：驚鏵完整的思路如下收集路径点集。平均采样路径点集。将路径点集转为 LineB。把 LineB 数据传给 Path。1）Vector2D.cs 代码如下usingSystem; usi...
【安卓开发系列 -- APP】OPENGL ES -- 光照
CopperSun 技术博客
10-14 325
【安卓开发系列 -- APP】OPENGL ES -- 光照 【1】曲面物体的构造 OpenGL ES 中任何形状的 3D 物体都是用三角形拼凑而成的，因此，构建曲面物体最重要的就是找到将曲面恰当拆分成三角形的策略； 最基本的策略是首先按照一定的规则将物体按行和列两个方向进行拆分，从而得到很多的小四边形；然后再将每个小四边形拆分成两个三角形； 拆分得越细，最终的绘制结果就越接近真实情况； 三角形中每个顶点的坐标计算公式 ，，； 【2】基本光照效果 【2.1】光照的基本模型 OpenGL E
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

字节流动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值