06-初始OpenGL ES -用GLSL实现画板的功能
效果图
准备资料
1.下载案例中需要用的资源，地址：https://download.csdn.net/download/lyz0925/12351912；
2.将所需要的资源拖入项目中。如下图：
代码实现
1.创建顶点着色器并实现如下的代码
//顶点
attribute vec4 inVertex;
//矩阵
uniform mat4 MVP;
//点的大小
uniform float pointSize;
//点的颜色
uniform lowp vec4 vertexColor;
//输出颜色
varying lowp vec4 color;
void main()
{
//顶点计算 = 矩阵 * 顶点
gl_Position = MVP * inVertex;
//修改顶点大小
gl_PointSize = pointSize;
// 1 * 3.0;
//将通过uniform 传递进来的颜色,从顶点着色器程序传递到片元着色器
color = vertexColor;
}
2.创建片元着色器并实现代码：
//获取纹理
uniform sampler2D texture;
/*
sampler2D,中的2D,表示这是一个2D纹理。我们也可以使用1D\3D或者其他类型的采样器。我们总是
把这个值设置为0。来指示纹理单元0.
*/
//获取从顶点程序传递过来的颜色
//lowp,精度
varying lowp vec4 color;
void main()
{
//将颜色和纹理组合 是相乘！！！！
gl_FragColor = color * texture2D(texture, gl_PointCoord);
}
3.自定义一个视图实现画板的功能：
–.h—的代码如下：
#import –.m—的代码如下：
#import 4.封装系统音效播放的工具类，代码如下：
#import #import "SoundEffect.h"
@implementation SoundEffect
//根据指定的声音文件中创建一个系统音效对象
+ (id)soundEffectWithContentOfFile:(NSString *)path {
if (path) {
return [[SoundEffect alloc] initWithContentOfFile:path];
}
return nil;
}
- (id)initWithContentOfFile:(NSString *)path {
self = [super init];
if (self != nil) {
//1. 获取声音文件路径
NSURL *fileURL= [NSURL fileURLWithPath:path];
//2.判断声音文件是否存在
if (fileURL == nil) {
NSLog(@"URL is nil for path %@",path);
return nil;
}
//3.定义SystemSoundid
SystemSoundID aSoundID;
//允许应用程序指定由系统声音服务播放其播放的音效
OSStatus error = AudioServicesCreateSystemSoundID((__bridge CFURLRef)fileURL, &aSoundID);
if (error == kAudioServicesNoError) {
//赋值
_soundID = aSoundID;
}else {
NSLog(@"Error:loading soud path = %@", path);
self = nil;
}
}
return self;
}
- (void)play {
//播放设置的系统音频
AudioServicesPlaySystemSound(_soundID);
}
- (void)dealloc {
//清除系统音效
AudioServicesDisposeSystemSoundID(_soundID);
}
@end
5.在storyboard中修改view的父类为“YZView”，并在控制器中实现如下代码：
#import "ViewController.h"
#import "SoundEffect.h"
#import "YZView.h"
//亮度
#define kBrightness 1.0
//饱和度
#define kSaturation 0.45
//调色板高度
#define kPaletteHeight 30
//调色板大小
#define kPaletteSize 5
//最小擦除区间
#define kMinEraseInterval 0.5
//填充率
#define kLeftMargin 10.0
#define kTopMargin 10.0
#define kRightMargin 10.0
@interface ViewController () {
SoundEffect *eraseSound;
SoundEffect *selecColorSound;
CFTimeInterval lastTime;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setUpUI];
}
- (void)setUpUI {
//数据存储颜色选择的图片
UIImage *redImage = [[UIImage imageNamed:@"Red"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *yeallowImage = [[UIImage imageNamed:@"Yellow"] imageWithRenderingMode:(UIImageRenderingMode)UIImageRenderingModeAlwaysOriginal];
UIImage *greenImage = [[UIImage imageNamed:@"Green"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *blueImage = [[UIImage imageNamed:@"Blue"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
NSArray *selectorImageArr = @[redImage, yeallowImage, greenImage, blueImage];
//2.创建一个分段控件 让用户可以选择画笔颜色
UISegmentedControl *segmentControl = [[UISegmentedControl alloc] initWithItems:selectorImageArr];
//3.设置控件的位置
CGRect rect = [[UIScreen mainScreen] bounds];
CGRect frame = CGRectMake(rect.origin.x + kLeftMargin, rect.size.height - kPaletteHeight - kTopMargin , rect.size.width - (kLeftMargin + kRightMargin), kPaletteHeight);
segmentControl.frame = frame;
//4.segmentcontoller添加按钮事件-- 改变画笔颜色
[segmentControl addTarget:self action:@selector(changeBrushColor:) forControlEvents:UIControlEventValueChanged];
//5. 设置tintColor 和 默认选择
segmentControl.selectedSegmentIndex = 2;
[self.view addSubview:segmentControl];
//6.加载声音--选择颜色和清空屏幕颜色的声音
NSString *ereasePath = [[NSBundle mainBundle] pathForResource:@"Erase" ofType:@"caf"];
NSString *selectPath = [[NSBundle mainBundle] pathForResource:@"Select" ofType:@"caf"];
eraseSound = [SoundEffect soundEffectWithContentOfFile:ereasePath];
selecColorSound = [SoundEffect soundEffectWithContentOfFile:selectPath];
//7.定义起始颜色
//创建并返回一个颜色对象使用指定的不透明的HSB颜色空间的分量值
/*
参数列表：
Hue:色调 = 选择的index/颜色选择总数
saturation:饱和度
brightness:亮度
*/
CGColorRef color = [UIColor colorWithHue:(CGFloat)2.0/(CGFloat)kPaletteSize saturation:kSaturation brightness:kBrightness alpha:1.0].CGColor;
//根据颜色值，返回颜色相关的颜色组件
const CGFloat *components = CGColorGetComponents(color);
//根据OpenGL视图设置画笔颜色
[(YZView *)self.view setBrushColorWithRed:components[0] green:components[1] blue:components[2]];
}
- (IBAction)eraseAction:(id)sender {
//防止一直不停点击清除屏幕
if (CFAbsoluteTimeGetCurrent() > lastTime + kMinEraseInterval) {
NSLog(@"清除屏幕");
//播放系统音效
[eraseSound play];
//清理屏幕
[(YZView *)self.view erase];
//保存这次时间到lastTime中
lastTime = CFAbsoluteTimeGetCurrent();
}
}
- (void)changeBrushColor:(id)sender {
NSLog(@"改变颜色");
[selecColorSound play];
// 定义新的画笔颜色 创建并返回一个颜色对象使用指定的不透明的HSB颜色空间的分量值
CGColorRef color = [UIColor colorWithHue:(CGFloat)[sender selectedSegmentIndex] / (CGFloat)kPaletteSize saturation:kSaturation brightness:kBrightness alpha:1.0].CGColor;
//返回颜色的组件，红、绿、蓝、alpha颜色值
const CGFloat *components = CGColorGetComponents(color);
// 根据OpenGL视图设置画笔颜色
[(YZView *)self.view setBrushColorWithRed:components[0] green:components[1] blue:components[2]];
}
按照以上的代码，便可实现电子画板的功能。