Day.03.14 UI绘制多种图形

作者: 挂树上的骷髅怪 | 来源:发表于2016-03-14 19:59 被阅读114次

Day.03.14 UI绘制多种图形
Android动画
OpenGL 矩阵堆栈与角色帧
Web 前端与 Unity 通信
酱油07 －程序封装与结构！（绘制不同图形）
Android自定义View 1-1 接上：画自定义图形
Android绘制(二):来用Path绘出想要的图形吧!
Android绘图之Canvas概念理解（5）
iOS图形绘制框架 ——UIBezierPath 、Core G
iOS UI绘制原理

ViewController.m

#import "ViewController.h"
#import "DrawerView.h"

#define KScreenWidth [UIScreen mainScreen].bounds.size.width
#define KScreenHeight [UIScreen mainScreen].bounds.size.height

@interface ViewController ()
{
    DrawerView *drawer;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    drawer = [[DrawerView alloc]initWithFrame:CGRectMake(0, 20, KScreenWidth, 400)];
    
    drawer.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:drawer];
}


- (IBAction)buttonClick:(UIButton *)sender {

//1.获取title
    NSString *title = [sender titleForState:UIControlStateNormal];
    
//2.通过title 构建SEL
    SEL selector = NSSelectorFromString(title);
    
//3.将方法名传入UIView中
    [drawer setASelector:selector];
    
//4.drawerView 重绘 setNeedsDisplay间接调用drawRect:方法
    [drawer setNeedsDisplay];
}

@end

DrawView.m

#import "DrawerView.h"

@implementation DrawerView
/**
 *  quartz2d绘图的步骤:(不用背)
 
1.获取与当前视图关联的[上下文]对象
 
2.✅创建路径 path
 
    2.1创建路径
    2.2设置路径的起点
2.3增加路径
 
3.✅设置[上下文]属性
 
    3.1边线颜色
    3.2填充颜色
    3.3线条宽度
    3.4线条样式
    3.5线条连接方式
    3.6线条首尾样式
 
4.讲路径添加到[上下文]对象
 
5.绘制路径
 
6.释放路径
*/
- (void)drawRect:(CGRect)rect{

    NSLog(@"drawRect");
    
//判断本类对象是否响应SEL方法
    if ([self respondsToSelector:_aSelector]) {
        
        //如果响应则调用(安全判断)
        [self performSelector:_aSelector];
    }
}

#pragma mark --绘制图片
- (void)drawImage{

    UIImage *image = [UIImage imageNamed:@"girl.png"];
    
    //指定矩形区域绘制图片 如果图片不够大,则平铺
//    [image drawAsPatternInRect:self.bounds];
    
    //制定矩形区域绘制图片 如果图片不够大,则拉伸
//    [image drawInRect:self.bounds];
    
    //制定一个点绘制一张图
    [image drawAtPoint:CGPointMake(50, 50)];
    
}

#pragma mark --绘制文字
- (void)drawString{

    NSString *text = @"Quartz 2D 绘图";
    
    //以某点为起点绘制文字
    [text drawAtPoint:CGPointMake(100, 100) withAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:20]}];
    
    //在矩形区域内绘制文字
    [text drawInRect:CGRectMake(100, 200, 200, 50) withAttributes:@{NSForegroundColorAttributeName:[UIColor greenColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:20]}];
}

#pragma mark --绘制多边形或多角星
- (void)drawStar{

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGPoint p0 = [self getPointFromCornerCount:5 radius:100 index:0 center:CGPointMake(200, 200)];
    CGPoint p1 = [self getPointFromCornerCount:5 radius:100 index:1 center:CGPointMake(200, 200)];
    CGPoint p2 = [self getPointFromCornerCount:5 radius:100 index:2 center:CGPointMake(200, 200)];
    CGPoint p3 = [self getPointFromCornerCount:5 radius:100 index:3 center:CGPointMake(200, 200)];
    CGPoint p4 = [self getPointFromCornerCount:5 radius:100 index:4 center:CGPointMake(200, 200)];
    
    //依次相连 --> 多边形
//    CGPoint points[] = {p0,p1,p2,p3,p4};
    
    //间隔相连 --> 多角星
    CGPoint points[] = {p0,p2,p4,p1,p3};
    
    CGContextAddLines(context, points, 5);
    
    CGContextClosePath(context);
    
    CGContextDrawPath(context, kCGPathStroke);
}

/**
 *  计算多边形各个定点坐标的方法
 *
 *  @param cornerCount 角个数
 *  @param radius      半径
 *  @param index       顶点下标
 *  @param center      圆心坐标点
 *
 *  @return 顶点的坐标
 */
- (CGPoint )getPointFromCornerCount:(NSInteger )cornerCount radius:(float )radius index:(NSInteger )index center: (CGPoint )center{
    
    float corner = 2* M_PI/cornerCount;
    
    CGFloat x = radius *cosf(corner *index);
    CGFloat y = radius *sinf(corner *index);
    
    return CGPointMake(center.x +x, center.y +y);
    
}

#pragma mark --绘制曲线
- (void)drawCurve{

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(context, 20, 200);
    
    /**
     *  贝塞尔曲线:
        三点:起点 辅助点 终点
        线:连接起点和终点,并穿过辅助点
     
        四点:起点 辅助点1 辅助点2 终点
        线:连接起点和终点,并以[起点--->辅助点1]和[终点--->辅助点2]两条线作为基准线,来决定弧度
     */
    CGContextAddQuadCurveToPoint(context, 50, 140, 220, 200);
    
    CGContextDrawPath(context, kCGPathStroke);
}

#pragma mark --绘制椭圆
- (void)drawEllipse{

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextAddEllipseInRect(context, CGRectMake(50, 50, 300, 150));
    
    CGContextDrawPath(context, kCGPathStroke);
}

#pragma mark --绘制矩形
- (void)drawShape{
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextAddRect(context, CGRectMake(50, 50, 200, 200));
    
    CGContextDrawPath(context, kCGPathStroke);
}

#pragma mark --绘制圆弧
- (void)drawCircle{

//1.获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
//2.绘制路径
    /**
     *  绘制圆弧的方法
     *
     *  @param c#>          上下文
     *  @param x#>          圆心x
     *  @param y#>          圆心y
     *  @param radius#>     半径
     *  @param startAngle#> 开始的弧度
     *  @param endAngle#>   结束的弧度
     *  @param clockwise#>  时针方向 0顺时针 1是逆时针
     *
     */
    //.1.起始点
//    CGContextMoveToPoint(context, 414/2, 200);
    
    //.2.绘制图形路径
    CGContextAddArc(context, 414/2, 200, 100, 0, M_PI, 1);
    
//3.设置上下文属性
    [[UIColor blueColor]setStroke];
    [[UIColor orangeColor]setFill];
    
//4.绘制
    CGContextDrawPath(context, kCGPathStroke);
    
}

#pragma mark --绘制线条
- (void)drawLine{

    //1.获取当前视图相关的上下文
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2.路径
    
    //创建路径对象
    CGMutablePathRef path = CGPathCreateMutable();
    
    //起点
    CGPathMoveToPoint(path, NULL, 0, 5);
    
    //添加路径点
    CGPathAddLineToPoint(path, NULL, 300, 5);
    
    CGPathAddLineToPoint(path, NULL, 300, 200);
    
    //    CGPathAddLineToPoint(path, NULL, 100, 100);
    
    //设置路径闭环
    //    CGPathCloseSubpath(path);
    
    //3.上下文属性
    
    //填充颜色 (默认黑)
    CGContextSetRGBFillColor(context, 212/255.0, 24/255.0, 148/255.0, 1);
    
    //线条宽度
    //‼️如果是OC->[context setLineWidth:5];
    
    CGContextSetLineWidth(context, 10);
    
    //线条颜色 (默认黑) (0,0,0)是黑色 (1,1,1)是白色
    CGContextSetRGBStrokeColor(context, 68/255.0, 178/255.0, 249/255.0, 1);
    
    //线条首尾样式
    /**
     *      kCGLineCapButt,
     kCGLineCapRound, 圆弧
     kCGLineCapSquare 方形
     
     */
    
    CGContextSetLineCap(context, kCGLineCapButt);
    
    //线条连接样式
    /**
     *      kCGLineJoinMiter,  默认
     kCGLineJoinRound,  圆弧
     kCGLineJoinBevel   斜线
     */
    CGContextSetLineJoin(context, kCGLineJoinBevel);
    
    //虚线定制
    /**
     *  context : 上下文对象
     phase : 虚线起点与路径起点的距离
     lengths : C数组 从数组中循环获取虚线长度和间隔
     count : 数组长度
     *
     */
    CGFloat lengths[] = {15,10,5};
    
    CGContextSetLineDash(context, 0, lengths, 3);
    
    
    //4.路径结合上下文
    
    CGContextAddPath(context, path);
    
    //5.绘制路径
    /**
     *    kCGPathFill, 填充
     kCGPathEOFill,
     kCGPathStroke,   画线
     kCGPathFillStroke,  画线+填充
     kCGPathEOFillStroke
     */
    
    CGContextDrawPath(context, kCGPathStroke);
    
    //6.释放路径
    
    CGPathRelease(path);
    
}
@end

屏幕快照 2016-03-14 下午7.55.29.png

屏幕快照 2016-03-14 下午7.55.38.png

屏幕快照 2016-03-14 下午7.55.46.png

屏幕快照 2016-03-14 下午7.55.54.png

屏幕快照 2016-03-14 下午7.56.03.png](https://img.haomeiwen.com/i1395501/d91e9ed755f08056.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

屏幕快照 2016-03-14 下午7.56.13.png

屏幕快照 2016-03-14 下午7.56.29.png

屏幕快照 2016-03-14 下午7.56.36.png

Day.03.14 UI绘制多种图形
ViewController.m DrawView.m 屏幕快照 2016-03-14 下午7.56.03.png...
Android动画
Android动画 Android提供了多种强大的API，用于动画UI元素和绘制自定义2D和3D图形。逐帧动画（...
OpenGL 矩阵堆栈与角色帧
程序全局只有一个矩阵堆栈，但是需要绘制的图形有多种即变化有很多种--每个图形所需的变换矩阵不同，如果想两个图形...
Web 前端与 Unity 通信
概要 UI 部分，由 HTML+CSS 实现图形绘制部分，由 Unity 实现【通信方向：Web 应用 => ...
酱油07 －程序封装与结构！（绘制不同图形）
绘制不同图形绘制图形类图形类图形子类
Android自定义View 1-1 接上：画自定义图形
学习http://hencoder.com/ui-1-1/笔记一、通过drawPath()绘制自定义图形 Pat...
Android绘制(二):来用Path绘出想要的图形吧!
Android绘制(一):来用shape绘出想要的图形吧! 目录前言绘制线绘制图形绘制弧绘制文字组合 ...
Android绘图之Canvas概念理解（5）
Canvas概述前面讲解了Canvas能够绘制多种图形，但没有讲解Canvas的概念，想要理解canvas不容易...
iOS图形绘制框架 ——UIBezierPath 、Core G
iOS图形绘制框架 ——UIBezierPath 、Core Graphics 和OpenGL iOS图形绘制框架...
iOS UI绘制原理
iOS UI绘制原理高质量的图形展示在app的交互界面中扮演非常重要的角色。高质量的图形展示让用户更能喜欢使用它...