iOS开发 做一个三角形

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

1. Swift Optional
2. Swift Enum
3. iOS开发 做一个三角形
4. Swfit 指针类型
5. Swift 属性（下）
6. Swift 属性
7. Swift 小结
8. Swift 类与结构体（下）
9. Swift 类的生命周期
10. Swift 类的初始化器
11. Swift 类与结构体
12. OpenGL 压缩纹理
13. OpenGL 隧道坐标计算
14. 0penGL 像素格式及数据类型
15. OpenGL 纹理对象
16. OpenGL 纹理
17. OpenGL 模型变化
18. OpenGL 视图
19. OpenGL 矩阵
20. OpenGL 向量
21. OpenGL 颜色混合
22. OpenGL 深度测试的潜在风险
23. OpenGL 浅析深度测试
24. OpenGL 浅析隐藏面消除
25. OpenGL 图元连接方式
26. 记WKWebView与HTML完成交互两三事
27. OpenGL 渲染流程图解析
28. OpenGL 控制你的正方形
29. OpenGL 专业名词解释
30. OpenGL 环境搭建 - MacOS

前段时间有一个需求，需要做一个三角形，今天和大家分享一下一起来做一个三角形。

分析

首先，我们分析下三角形的几种形式：

我的想法是，在一个View中，先分出来6个顶点；然后，我们使用贝塞尔曲线连接其中的三个顶点，填充颜色之后，我们就可以得到一个三角形。

/**
    A                      B                      C

    * -------------------- * -------------------- *
    |                                             |
    |                                             |
    |                                             |
    |                                             |
    |                                             |
    * -------------------- * -------------------- *

    D                      E                      F
 */

顶点划分，我们按照上面的图片，先分析出来 、B、C、D、E、F 这六个顶点。

然后，我们将三角形分为尖头朝上、朝下，这样，就可以得到，尖头潮上的时候，尖头在左、中、右 或者尖头朝下的时候，尖头在左、中、右的三种情况。

这样，我们就以尖头所在的点，来定义一下三角形的一个类型：

typedef NS_ENUM(NSUInteger, TriangleType) {
    TriangleAngleA,
    TriangleAngleB,
    TriangleAngleC,
    TriangleAngleD,
    TriangleAngleE,
    TriangleAngleF,
};

接着，我们要 对View 定义一个实例化方法：
其中第一个参数就是上面，我们定义的 三角形 顶点所在的位置；第二个参数就是三角形的颜色；

/// 实例化一个三角形
/// @param triangleType 三角形类型
/// @param triangleColor 颜色
- (instancetype)initWithTriangleType:(TriangleType)triangleType
                            andColor:(UIColor *)triangleColor;

实现

接下来，我们实现一下上面的分析内容：

首先就是对应的6个顶点：
一下六个顶点数据的宏，就是对应上面分析的6个顶点数据。

#define Point_A CGPointMake(0,                              0)
#define Point_B CGPointMake(self.frame.size.width *0.5,     0)
#define Point_C CGPointMake(self.frame.size.width,          0)
#define Point_D CGPointMake(0,                              self.frame.size.height)
#define Point_E CGPointMake(self.frame.size.width *0.5,     self.frame.size.height)
#define Point_F CGPointMake(self.frame.size.width,          self.frame.size.height)

我们先定义两个属性：

/// 三角形类型
@property (nonatomic, assign) TriangleType triangleType;

/// 三角形颜色
@property (nonatomic, strong) UIColor *triangleColor;

有了6个顶点数据，我们就可以实现我们定义的实例化方法：
实例化方法中，对三角形类型和颜色做赋值。

- (instancetype)initWithTriangleType:(TriangleType)triangleType
                            andColor:(nonnull UIColor *)triangleColor {
    if (self = [super init]) {
        _triangleType = triangleType;
        _triangleColor = triangleColor;
    }
    return self;
}

下面就是整个三角形自定义内容中，最核心的方法： 根据我们的三角形类型，来找到对应的三个顶点，最后进行绘制，就得到了我们的三角形。

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    self.backgroundColor = [UIColor clearColor];
    
    UIBezierPath *path  = [UIBezierPath bezierPath];
    path.lineWidth = 1.f;
    
    NSArray *pointArr = @[];
    
    if (self.triangleType == TriangleAngleA) {
        pointArr = @[ [NSValue valueWithCGPoint:Point_D],
                      [NSValue valueWithCGPoint:Point_F],
                      [NSValue valueWithCGPoint:Point_A],
                      [NSValue valueWithCGPoint:Point_D]];
        
    }else if (self.triangleType == TriangleAngleB) {
        
        pointArr = @[ [NSValue valueWithCGPoint:Point_D],
                      [NSValue valueWithCGPoint:Point_F],
                      [NSValue valueWithCGPoint:Point_B],
                      [NSValue valueWithCGPoint:Point_D]];
    }else if (self.triangleType == TriangleAngleC) {
        
        pointArr = @[ [NSValue valueWithCGPoint:Point_D],
                      [NSValue valueWithCGPoint:Point_F],
                      [NSValue valueWithCGPoint:Point_C],
                      [NSValue valueWithCGPoint:Point_D]];
    }else if (self.triangleType == TriangleAngleD) {
        
        pointArr = @[ [NSValue valueWithCGPoint:Point_A],
                      [NSValue valueWithCGPoint:Point_C],
                      [NSValue valueWithCGPoint:Point_D],
                      [NSValue valueWithCGPoint:Point_A]];
    }else if (self.triangleType == TriangleAngleE) {
        
        pointArr = @[ [NSValue valueWithCGPoint:Point_A],
                      [NSValue valueWithCGPoint:Point_C],
                      [NSValue valueWithCGPoint:Point_E],
                      [NSValue valueWithCGPoint:Point_A]];
        
    }else if (self.triangleType == TriangleAngleF) {
        
        pointArr = @[ [NSValue valueWithCGPoint:Point_A],
                      [NSValue valueWithCGPoint:Point_C],
                      [NSValue valueWithCGPoint:Point_F],
                      [NSValue valueWithCGPoint:Point_A]];
    }
    
    for (int i = 0; i < pointArr.count; i++) {
        CGPoint point = [[pointArr objectAtIndex:i] CGPointValue];
        if (i == 0) {
            [path moveToPoint:point];
        }else {
            [path addLineToPoint:point];
        }
    }
    
    [path closePath];
    
    [self.triangleColor setStroke];
    [self.triangleColor setFill];
    
    [path stroke];
    [path fill]; 
}

扩展

我们可以考虑再进行更大的自定义化，就是可以将顶点的位置坐自定义化，比如：我们可以将顶点定义在四条边上的任意位置。这样，通过计算，我们可以得到三个顶点数据，最后也是可以得到一个三角形的。而且，比上面的6个顶点的三角形有更多的差异性。 那么，不妨，你来试试，如何实现呢？