效果

image.png

案例思路

image.png

核心代碼

1.創(chuàng)建圖層

-(id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        
        //初始化CAEAGLLayer
        CAEAGLLayer *eagLayer = (CAEAGLLayer *)self.layer;
        
        //設(shè)置透明度
        eagLayer.opaque = YES;
        
        //設(shè)置eaglLayer描述屬性
        /*
         1.kEAGLDrawablePropertyRetainedBacking
         表示繪圖表面顯示后趟咆，是否保留其內(nèi)容编矾，通過一個NSNumber 包裝一個bool值护桦。如果是NO,表示
         顯示內(nèi)容后蜘腌，不能依賴于相同的內(nèi)容域醇；如果是YES，表示顯示內(nèi)容后不變作儿，一般只有在需要內(nèi)容保存不變的情況下才使用YES豆茫，設(shè)置為YES,會導(dǎo)致性能降低，內(nèi)存使用量降低溉愁。一般設(shè)置為NO处铛。
         
         2.kEAGLDrawablePropertyColorFormat
         表示繪制表面的內(nèi)部顏色緩存區(qū)格式
         */
        eagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithBool:NO],kEAGLDrawablePropertyRetainedBacking,kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];
        
        //初始化上下文
        context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
        
        //判斷是否開辟成功以及設(shè)置到當(dāng)前的context
        if (!context ||![EAGLContext setCurrentContext:context]) {
            return nil;
        }
        
        //設(shè)置視圖比例因子
        /*
         比例因子決定視圖中的內(nèi)容如何從邏輯坐標(biāo)空間（以點測量）映射到設(shè)備坐標(biāo)空間（以像素為單位）。此值通常為1或2拐揭。更高比例的因素表明視圖中的每一個點由底層的多個像素表示撤蟆。例如，如果縮放因子為2堂污，并且視圖框大小為50×50點家肯，則用于顯示內(nèi)容的位圖的大小為100×100像素。
         */
        self.contentScaleFactor = [UIScreen mainScreen].scale;
        
        //是否需要清屏盟猖，默認(rèn)等于YES
        needsErase = YES;
        
    }
    return self;
}

2.判斷是否要初始化

//CCView layOut
-(void)layoutSubviews
{
    [EAGLContext setCurrentContext:context];
    //判斷是否初始化
    if (!initialized) {
        //如果沒有初始化則對OpenGL初始化
      initialized = [self initGL];
        
    }else
    {
        //如果已經(jīng)初始化則調(diào)整layer
        [self resizeFromLayer:(CAEAGLLayer *)self.layer];
        
    }
    
    //清除第一次分配
    if (needsErase) {
        [self erase];
        needsErase = NO;
    }
    
}

3.初始化并繪制加油字樣

-(BOOL)initGL
{
    //生成表示一個幀緩存對象和顏色渲染
    glGenFramebuffers(1, &viewFrameBuffer);
    glGenRenderbuffers(1, &viewRenderBuffer);
    
    //綁定viewFrameBuffer 和viewRenderBuffer
    glBindFramebuffer(GL_FRAMEBUFFER, viewFrameBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, viewRenderBuffer);
    
    //綁定一個Drawable對象儲存到一個OpenGL ES渲染緩存對象
    /*
     創(chuàng)建一個渲染讨衣，可以呈現(xiàn)到屏幕上换棚，你將渲染然后分配共享存儲通過調(diào)用此方法。這個方法的調(diào)用替換通常給glrenderbufferstorage反镇。緩存的存儲分配了這個方法以后可以顯示一個回調(diào)presentrenderbuffer：
     為繪制緩沖區(qū)分配存儲區(qū)固蚤，此處將CAEAGLLayer的繪制存儲區(qū)作為繪制緩沖區(qū)的存儲區(qū)
     參數(shù)1：OpenGL ES的結(jié)合點為當(dāng)前綁定的渲染。這個參數(shù)的值必須gl_renderbuffer（或gl_renderbuffer_oes在OpenGL ES 1.1語境）
     參數(shù)2：對象管理數(shù)據(jù)存儲區(qū)中的渲染愿险。在iOS中颇蜡，這個參數(shù)的值必須是一個CAEAGLLayer對象
     */
    [context renderbufferStorage:GL_RENDERBUFFER fromDrawable:(id<EAGLDrawable>)self.layer];
    
    //將viewRenderBuffer 綁定到GL_COLOR_ATTACHMENT0, GL_FRAMEBUFFER 附著在GL_RENDERBUFFER的顏色附著點0點上，放在viewRenderBuffer
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, viewRenderBuffer);
    
    //獲取繪制緩存區(qū)的像素寬度 -- 將繪制緩存區(qū)像素寬度存儲在backingWidth
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &backingWidth);
    //獲取繪制緩存區(qū)的像素高度--將繪制緩存區(qū)像素高度存儲在backingHeight
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &backingHeight);
    
    //檢查GL_FRAMEBUFFER緩存區(qū)狀態(tài)
    if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
        NSLog(@"Make comlete frameBuffer Object faild %X !", glCheckFramebufferStatus(GL_FRAMEBUFFER));
        return NO;
    }
    
    //設(shè)置視口
    glViewport(0, 0, backingWidth, backingHeight);
    
    //創(chuàng)建頂點緩沖對象來保存我們的對象
    glGenBuffers(1, &vboId);
    
    //加載畫筆紋理
    brushTexture  = [self textureFromName:@"Particle.png"];
    
    //加載著色器
    [self setupShaders];
    
    //點模糊效果通過開啟混合模式辆亏，并設(shè)置混合函數(shù)
    glEnable(GL_BLEND);
    glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA); //參考之前的混合函數(shù)表文章
    
    //回放錄制的路徑风秤，這是“加油”
    NSString *path = [[NSBundle mainBundle]pathForResource:@"abc" ofType:@"string"];
    NSString *str = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    
    //開辟數(shù)據(jù)空間-可變的
    CCArr = [NSMutableArray array];
    
    //根據(jù)abc.string文件，將繪制點的數(shù)據(jù)扮叨。json解析到數(shù)組
    NSArray *jsonArray = [NSJSONSerialization JSONObjectWithData:[str dataUsingEncoding:NSUTF8StringEncoding] options:NSJSONReadingAllowFragments error:nil];
    
    for (NSDictionary *dict in jsonArray) {
        CCPoint *point = [CCPoint new];
        point.mX = [dict objectForKey:@"mX"];
        point.mY = [dict objectForKey:@"mY"];
        
        //將CCPoint 對象添加到CCArr數(shù)組
        [CCArr addObject:point];
    }
    
    //調(diào)用繪制方法：繪制abc.string 繪制的加油字樣缤弦，延時5秒繪制
    [self performSelector:@selector(paint) withObject:nil afterDelay:0.5];

    return YES;
   
}
//繪制加油字樣
-(void)paint
{
    //從0開始遍歷頂點，步長為2
    //p1,開始點彻磁，p2,結(jié)束點
    for (int i = 0; i < CCArr.count - 1; i+=2) {
        
        //從CCArr數(shù)組中讀取頂點cp1,cp2
        CCPoint *cp1 = CCArr[i];
        CCPoint *cp2 = CCArr[i + 1];
        
        //將CCPoint對象 -> CGPoint對象
        CGPoint p1,p2;
        p1.x = cp1.mX.floatValue;
        p2.x = cp2.mX.floatValue;
        
        p1.y = cp1.mY.floatValue;
        p2.y = cp2.mY.floatValue;
        
        //在用戶觸摸的地方繪制上的線條
        [self renderLineFromPoint:p1 toPoint:p2];
        
    }
}

4.手寫頂點著色器程序point.vsh

//頂點
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 傳遞進(jìn)來的顏色,從頂點著色器程序傳遞到片元著色器
    color = vertexColor;
}

5.手寫片元著色器程序point.fsh

// 獲取紋理
/**
 sampler2D中的2D碍沐，表示這是一個2D紋理。我們也可以使用1D/3D或者其他類型的采樣器衷蜓。我們總是
 把這個值設(shè)置為0累提。來指示紋理單元0.
 */
uniform sampler2D texture;

//獲取從頂點程序傳遞過來的顏色
//lowp.精度
//輸出顏色
varying lowp vec4 color;

void main()
{
    //將顏色和紋理組合是相乘
    gl_FragColor = color * texture2D(texture, gl_PointCoord);
    
}

6.加載shader

- (void)setupShaders
{
    for (int i = 0; i < NUM_PROGRAMS; i++) {
        
        //讀取頂點著色程序
        char *vsrc = readFile(pathForResource(program[i].vert));
        char *fsrc = readFile(pathForResource(program[i].frag));
        
        //將char ->NSString 對象
        NSString *vsrcStr = [[NSString alloc] initWithBytes:vsrc length:strlen(vsrc)-1 encoding:NSUTF8StringEncoding];
        NSString *fsrcStr = [[NSString alloc] initWithBytes:fsrc length:strlen(fsrc)-1 encoding:NSUTF8StringEncoding];

        NSLog(@"vsrc:%@", vsrcStr);
        NSLog(@"fsrc:%@", fsrcStr);
        
        //attribute
        GLsizei attribCt = 0;
        //創(chuàng)建字符串?dāng)?shù)組【1】
        GLchar *attribUsed[NUM_ATTRIBS];
        
        GLint attrib[NUM_ATTRIBS];
        
        //attribute變量名稱-inVertex(point.vsh)
        GLchar *attribName[NUM_ATTRIBS] = {
            "inVertex",
        };
        
        //uniform 變量名稱 “mvp”, "pointSize","vertexColor",@"texture"
        const GLchar *uniformName[NUM_UNIFORMS] = {
          "MVP","pointSize","vertexColor", "texture",
        };
        
        //遍歷attribute
        for (int j = 0; j < NUM_ATTRIBS; j++) {
            
            //strstr(str1,str2) 函數(shù)用于判斷字符串str2是否是str1的子串。如果是磁浇，則該函數(shù)返回str2在str1中首次出現(xiàn)的地址斋陪；否則，返回NULL置吓。
        //判斷无虚，attribute 變量，是否存在頂點著色器程序中衍锚。point.vsh
            if (strstr(vsrc, attribName[j])) {
                
                //attribute個數(shù)
                attrib[attribCt] = j;
                //使用的attribute的名稱
                attribUsed[attribCt++] = attribName[j];
                
            }
        }
        
        //利用shaderUtil.c封裝好的方法對programe 進(jìn)行創(chuàng)建友题、鏈接、生成Programe
        /**
         GLint glueCreateProgram(const GLchar *vertSource, const GLchar *fragSource,
         GLsizei attribNameCt, const GLchar **attribNames,
         const GLint *attribLocations,
         GLsizei uniformNameCt, const GLchar **uniformNames,
         GLint *uniformLocations,
         GLuint *program)
         */
        /*
         參數(shù)1：vsrc,頂點著色器程序
         參數(shù)2：fsrc,片元著色器程序
         參數(shù)3：attribute變量個數(shù)
         參數(shù)4：attribute變量名稱
         參數(shù)5：當(dāng)前attribute位置
         參數(shù)6: uniform個數(shù)
         參數(shù)7：uniform名字
         參數(shù)8：program的uniform地址
         參數(shù)9：program程序地址
         */
        glueCreateProgram(vsrc, fsrc, attribCt, (const GLchar **)&attribUsed[0], attrib, NUM_UNIFORMS, &uniformName[0], program[i].uniform, &program[i].id);
        
        //釋放vsrc, fsrc 指針
        free(vsrc);
        free(fsrc);
        
        //設(shè)置常數(shù)
        //當(dāng)前i == 0
        if (i == PROGRAM_POINT) {
            
            //使用proram program[0].id 等價以往的例子GLuint program;
            glUseProgram(program[PROGRAM_POINT].id);
         
            //為當(dāng)前程序?qū)ο笾付╱niform變量值
            /*
             為當(dāng)前程序?qū)ο笾付╱niform變量MVP賦值
             
             void glUniform1f(GLint location,  GLfloat v0);
             參數(shù)1:location戴质，指明要更改的uniform變量的位置 MVP
             參數(shù)2：v0,指明在指定的uniform變量中要使用的新值
             
             program[0].uniform[3] = 0
             等價于度宦，vsh頂點著色器程序中的uniform變量，MVP = 0;
             其實簡單理解就是做了一次初始化置森，清空這個mat4矩陣
             */
            glUniform1i(program[PROGRAM_POINT].uniform[UNIFORM_TEXTURE], 0);
            
            // 投影矩陣
            /*
             投影分為正射投影和透視投影斗埂，我們可以通過它來設(shè)置投影矩陣來設(shè)置視域，在OpenGL中凫海，默認(rèn)的投影矩陣是一個立方體呛凶，即x y z 分別是-1.0~1.0的距離，如果超出該區(qū)域行贪，將不會被顯示
             
             正射投影(orthographic projection)：GLKMatrix4MakeOrtho(float left, float righ, float bottom, float top, float nearZ, float farZ)漾稀，該函數(shù)返回一個正射投影的矩陣模闲，它定義了一個由 left、right崭捍、bottom尸折、top、near殷蛇、far 所界定的一個矩形視域实夹。此時，視點與每個位置之間的距離對于投影將毫無影響粒梦。
             
             透視投影(perspective projection)：GLKMatrix4MakeFrustum(float left, float right,float bottom, float top, float nearZ, float farZ)亮航，該函數(shù)返回一個透視投影的矩陣，它定義了一個由 left匀们、right缴淋、bottom、top泄朴、near重抖、far 所界定的一個平截頭體(椎體切去頂端之后的形狀)視域。此時祖灰，視點與每個位置之間的距離越遠(yuǎn)钟沛，對象越小。
             
             在平面上繪制局扶，只需要使正投影就可以了６锾蕖！
             */
            GLKMatrix4 projectionMatrix = GLKMatrix4MakeOrtho(0, backingWidth, 0, backingHeight, -1, 1);
            
            //模型矩陣详民，比如你要平移、旋轉(zhuǎn)陌兑、縮放沈跨，就可以設(shè)置在模型矩陣上
            //這里不需要這些變換，則使用單元矩陣即可兔综，相當(dāng)于1 * 饿凛？ = ？
            GLKMatrix4 modelViewMatrix = GLKMatrix4Identity;
            
            //矩陣相乘就2個矩陣的結(jié)果交給MVPMatrix
            GLKMatrix4 MVPMatrix = GLKMatrix4Multiply(projectionMatrix, modelViewMatrix);
            
            /*
             void glUniformMatrix4fv(GLint location, GLsizei count, GLboolean transpose, const GLfloat* value);
             功能：為當(dāng)前程序?qū)ο笾付╱niform變量值
             參數(shù)1：location 指明要更改的uniform變量的位置 MVP
             參數(shù)2：count 指定將要被修改的矩陣的數(shù)量
             參數(shù)3：transpose 矩陣的值被載入變量時软驰，是否要對矩陣進(jìn)行變換涧窒，比如轉(zhuǎn)置！
             參數(shù)4：value 锭亏，指向?qū)⒁糜诟聈niform變量MVP的數(shù)組指針
             */
            glUniformMatrix4fv(program[PROGRAM_POINT].uniform[UNIFORM_MVP], 1, GL_FALSE, MVPMatrix.m);
            
            //點的大小 pointSize
            /*
             為當(dāng)前程序?qū)ο笾付╱niform變量pointSize賦值
             program[0].uniform[pointSize] = 紋理寬度/畫筆比例
             */
            glUniform1f(program[PROGRAM_POINT].uniform[UNIFORM_POINT_SIZE], brushTexture.width / kBrushScale);
            
            //筆刷顏色
            /*
             為當(dāng)前程序?qū)ο笾付╱niform變量vertexColor賦值
             program[0].uniform[vertexColor] = 畫筆顏色
             
             void glUniformMatrix4fv(GLint location, GLsizei count, GLboolean transpose, const GLfloat* value);
             功能：為當(dāng)前程序?qū)ο笾付╱niform變量值
             參數(shù)1：location 指明要更改的uniform變量的位置 vertexColor
             參數(shù)2：count 指定將要被修改的4分量的數(shù)量
             參數(shù)3：value 纠吴，指向?qū)⒁糜诟聈niform變量vertexColor的值
             
             */
            glUniform4fv(program[PROGRAM_POINT].uniform[UNIFORM_VERTEX_COLOR], 1, brushColor);
        }
    }
    glError();
}

7.通過兩點繪制線條

//在用戶觸摸的地方繪制屏幕上的線條
-(void)renderLineFromPoint:(CGPoint)start toPoint:(CGPoint)end
{
    //頂點緩存區(qū)
    static GLfloat *vertexBuffer = NULL;
    
    //頂點Max(暫時)
    static NSUInteger vertextMax = 64;
    //頂點個數(shù)
    NSUInteger vertexCount = 0,count;
    
    //從點到像素轉(zhuǎn)換
    //視圖的比例因子
    CGFloat scale = self.contentScaleFactor;
    //將每個頂點與scale 因子相乘
    start.x *= scale;
    start.y *= scale;
    
    end.x *= scale;
    end.y *= scale;
    
    //開辟數(shù)組緩存區(qū)
    if (vertexBuffer == NULL) {
        //開辟頂點地址空間
        vertexBuffer = malloc(vertextMax * 2 * sizeof(GLfloat));
    }
    
    /*
     通過把起點到終點的軌跡分解成若干個點，分別來繪制每個點慧瘤，從而達(dá)到線的效果
     ceilf（）向上取整戴已。不是四舍五入固该，而是判斷后面有小數(shù)，去掉小數(shù)部分糖儡，整數(shù)部分加1.
     如：123.456 => 124
     123.001 => 124
     
     */
    //向緩沖區(qū)添加點伐坏，所以每個像素都有繪圖點
    //求得start 和 end 2點間的距離
    float seq = sqrtf((end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y));
    
    /*
     向上取整，求得距離要產(chǎn)生多少個點握联？
     kBrushPixelStep,畫筆像素步長
     修改kBrushPixelStep 的值桦沉，越大，筆觸越細(xì)金闽；越小纯露，筆觸越粗！
     */
    NSInteger pointCount = ceilf(seq / kBrushPixelStep);
    
    //比較pointCount 是不是大于1呐矾，如果小于1,則count = 1,否則count = pointCount;
    count = MAX(pointCount, 1);
    
    for (int i = 0; i < count; i++) {
        
        //判斷如果頂點數(shù) > 設(shè)置頂點Max
        if (vertexCount == vertextMax) {
            
            //修改vertexMax 2倍增長
            vertextMax = 2 * vertextMax;
            
            //增加空間開辟
            vertexBuffer = realloc(vertexBuffer, vertextMax * 2 * sizeof(GLfloat));
        }
        
        //修改vertexBuffer數(shù)組的值
        //將start 和 end 距離之間苔埋，計算出count個點钳枕，并存儲在vertexBuffer數(shù)組中
        //x = start.x + (end.x - start.x) * (i/count);
        //y = start.y + (end.y - start.y) * (i/count);
        //vertexBuffer[0]->x
        vertexBuffer[2 * vertexCount + 0] = start.x + (end.x - start.x) * ((CGFloat)i/(GLfloat)count);
        //vertextBuffer[1]->y
        vertexBuffer[2 * vertexCount + 1] = start.y + (end.y - start.y) * ((CGFloat)i/(CGFloat)count);
        
        NSLog(@"X:%f",vertexBuffer[2 * vertexCount]);
        NSLog(@"Y:%f",vertexBuffer[2 * vertexCount + 1]);
        
        // vertexCount 自增1
        vertexCount += 1;
    }
    
    //加載數(shù)據(jù)到vertexBuffer 對象中
    glBindBuffer(GL_ARRAY_BUFFER, vboId);
    //將cpu存儲的頂點數(shù)據(jù)-cpu中 復(fù)制頂點數(shù)據(jù)到緩沖中提供給OpenGL使用
    glBufferData(GL_ARRAY_BUFFER, vertexCount * 2 * sizeof(GLfloat), vertexBuffer, GL_DYNAMIC_DRAW);
    
    /**
     連接頂點屬性
     glEnableVertexAttribArray啟用指定屬性晕讲，才可在頂點著色器中訪問逐頂點的屬性數(shù)據(jù)
     */
    glEnableVertexAttribArray(ATTRIB_VERTEX);
    glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, GL_FALSE, 2*sizeof(GLfloat), 0);
    
    //繪制
    //使用剛剛創(chuàng)建的program[0].id的program
    glUseProgram(program[PROGRAM_POINT].id);
    
    /*
     根據(jù)頂點繪制圖形，
     參數(shù)1：繪制模型 連接線段锰什，參考視覺班第一節(jié)課的課件
     參數(shù)2：起始點罚随，0
     參數(shù)3：頂點個數(shù)
     */
    glDrawArrays(GL_POINTS, 0, (int)vertexCount);
    
    //顯示buffer
    glBindRenderbuffer(GL_RENDERBUFFER, viewRenderBuffer);
    
    [context presentRenderbuffer:GL_RENDERBUFFER];
    
}

8.用戶手勢處理

#pragma mark -- Touch Click
//點擊屏幕開始
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
  //獲取繪制的bounds
    CGRect bounds = [self bounds];
    //獲取當(dāng)前的點擊touch
    UITouch * touch = [[event touchesForView:self] anyObject];
     //設(shè)置為firstTouch -> yes
    firstTouch = YES;
    
    ////獲取當(dāng)前點擊的位置信息玉工，x,y
    _location = [touch locationInView:self];
    
    //y = height - y
    _location.y = bounds.size.height - _location.y;
    
}

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CGRect bounds = [self bounds];
    UITouch *touch = [[event touchesForView:self] anyObject];
    
    //第一次點擊
    if (firstTouch) {
        //將firstTouch狀態(tài)改為NO
        firstTouch = NO;
        ////_previousLocation = 獲取上一個頂點
        _previousLocation = [touch previousLocationInView:self];
        _previousLocation.y = bounds.size.height - _previousLocation.y;
    }else {
        
        _location = [touch locationInView:self];
        _location.y = bounds.size.height - _location.y;
        _previousLocation = [touch previousLocationInView:self];
        _previousLocation.y = bounds.size.height - _previousLocation.y;
    }
     //獲取_previousLocation 和 _location 2個頂點，繪制成線條
    [self renderLineFromPoint:_previousLocation toPoint:_location];
}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CGRect bounds = [self bounds];
    UITouch *touch = [[event touchesForView:self] anyObject];
    
    //判斷是否第一次觸碰
    if (firstTouch) {
        firstTouch = NO;
        _previousLocation = [touch previousLocationInView:self];
        _previousLocation.y = bounds.size.height - _previousLocation.y;
    
        [self renderLineFromPoint:_previousLocation toPoint:_location];
    }
    
    
}

-(void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    NSLog(@"Touch Cancelled");
}

10.加載畫筆紋理

// 創(chuàng)建一個紋理圖片
- (textureInfo_t)textureFromName:(NSString *)name
{
    CGImageRef brushImage;
    CGContextRef brushContext;
    GLubyte *brushData;
    size_t width,height;
    GLuint textId;
    textureInfo_t texture;
    
    //首先建立在圖像文件的額數(shù)據(jù)一個UIImage對象淘菩，然后提取核心圖形圖像
    brushImage = [UIImage imageNamed:name].CGImage;
    
    //獲取圖片的寬高
    width = CGImageGetWidth(brushImage);
    height = CGImageGetHeight(brushImage);
    
    //分配位圖上下文所需的內(nèi)存
    /**
     參數(shù)一：圖標(biāo)的內(nèi)存大小遵班，寬*高*4，4為rbga
     參數(shù)二：存儲類型潮改，無符號
     */
    brushData = (GLubyte *)calloc(width * height * 4 , sizeof(GLubyte));
    
    //使用Core Graphics框架提供的bitmatp創(chuàng)造功能狭郑。
    /*
     CGContextRef CGBitmapContextCreate(
     void * data,
     size_t width,
     size_t height,
     size_t bitsPerComponent,
     size_t bytesPerRow,
     CGColorSpaceRef cg_nullable space,
     uint32_t bitmapInfo);
     
     Quartz創(chuàng)建一個位圖繪制環(huán)境，也就是位圖上下文汇在。
     參數(shù)1：data,要渲染的繪制內(nèi)容的地址
     參數(shù)2：位圖的寬
     參數(shù)3：位圖的高
     參數(shù)4：內(nèi)存中像素的每個組件的位數(shù)翰萨，比如32位像素格式和RGB顏色空間。一般設(shè)置為8
     參數(shù)5：位圖每一行占有比特數(shù)
     參數(shù)5：顏色空間糕殉，通過CGImageGetColorSpace(圖片）獲取顏色空間
     參數(shù)6：顏色通道亩鬼，RGBA = kCGImageAlphaPremultipliedLast
     
     */
    brushContext = CGBitmapContextCreate(brushData, width, height, 8, width * 4, CGImageGetColorSpace(brushImage), kCGImageAlphaPremultipliedLast);
    
    //創(chuàng)建完context之后，可以在context上繪制圖片
    /*
     void CGContextDrawImage(CGContextRef c, CGRect rect,
     CGImageRef image);
     參數(shù)1：位圖上下文
     參數(shù)2：繪制的frame
     參數(shù)3：繪制的圖片
     */
    CGContextDrawImage(brushContext, CGRectMake(0.0, 0.0f, (CGFloat)width, (CGFloat)height), brushImage);
    
    //接下來將不需要上下文阿蝶，因此需要釋放它以避免內(nèi)存泄漏
    CGContextRelease(brushContext);
    
    //使用OpenGL ES生成紋理
    /*
     生成紋理的函數(shù)
     glGenTextures (GLsizei n, GLuint* textures)
     參數(shù)1：n,生成紋理個數(shù)
     參數(shù)2：存儲紋理索引的第一個元素指針
     */
    glGenTextures(1, &textId);
    
    //綁定紋理名稱雳锋，允許建立一個綁定到目標(biāo)紋理的有名稱的紋理
    glBindTexture(GL_TEXTURE_2D, textId);
    
    //設(shè)置紋理參數(shù)使用縮小濾波器和線性濾波器（加權(quán)平均）--設(shè)置紋理屬性
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    
    //指定2D紋理圖像，為內(nèi)存中的圖像數(shù)據(jù)提供一個指針羡洁。
    /*
     功能：生成2D紋理
     glTexImage2D (GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid* pixels)玷过；
     參數(shù)1：target,紋理目標(biāo)，因為你使用的是glTexImage2D函數(shù)，所以必須設(shè)置為GL_TEXTURE_2D
     參數(shù)2：level,0冶匹，基本圖像級別
     參數(shù)3：internalformat习劫，顏色組件；GL_RGBA嚼隘，GL_ALPHA诽里，GL_RGBA
     參數(shù)4：width,紋理圖像的寬度
     參數(shù)5：height,紋理圖像的高度
     參數(shù)6：border,紋理邊框的寬度,必須為0
     參數(shù)7：format,像素數(shù)據(jù)的顏色格式，可不與internalformat一致飞蛹，可參考internalformat的值
     參數(shù)8：type,像素數(shù)據(jù)類型谤狡，GL_UNSIGNED_BYTE
     參數(shù)9：pixels，內(nèi)存中指向圖像數(shù)據(jù)的指針
     
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, (int)width, (int)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, brushData);
    
    //生成紋理之后卧檐，即可釋放brushData數(shù)據(jù)
    free(brushData);
    
    //補(bǔ)充自己定義的texture結(jié)構(gòu)體中的內(nèi)容
    //紋理
    texture.id = textId;
    //紋理寬度
    texture.width = (int)width;
    //紋理高度
    texture.height = (int)height;
    //返回紋理對象數(shù)據(jù)
    return texture;
}

11.設(shè)置畫筆顏色

- (void)setBrushColorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue
{
  //更新畫筆顏色 顏色 * 透明度
    brushColor[0] = red * kBrushOpacity;
    brushColor[1] = green * kBrushOpacity;
    brushColor[2] = blue * kBrushOpacity;
    brushColor[3] = kBrushOpacity;
    
    NSLog(@"%f,%f,%f,%f",brushColor[0],brushColor[1],brushColor[2],brushColor[3]);
    NSLog(@"%f,%f,%f",red,green,blue);
    //釋放初始化
    if (initialized) {
        
        //使用program[0].id
        glUseProgram(program[PROGRAM_POINT].id);
        //將顏色值brushColor 傳遞到 vertexColor中
        glUniform4fv(program[PROGRAM_POINT].uniform[UNIFORM_VERTEX_COLOR], 1, brushColor);
    }
    
}