SDDrawView:画板组件,这里的箭头很有特点!

╰半橙微兮° 2023-01-09 12:36 33阅读 0赞

![9afda1f05287d07ccd7e4fb1e5e446a6.png][]

#### SDDrawView简介 ####

--------------------

SDDrawView 是一款基于贝塞尔曲线的画板组件,目前样式包含线条、矩形、圆形、箭头等样式.具有调整画板颜色,线条宽度,线条颜色等基本功能.后期准备接入图片涂改,橡皮擦功能,添加文字等功能.至于为什么要做SDDrawView这样的一个三方画板组件,其实SDDrawView大部分功能和现在网上的画板组件都是类似的,是一个不折不扣的造轮子组件.其实,在网上找了很多的画板组件三方中**箭头**样式令人不是太满意显得非常的生硬,大部分是一个矩形加一个三角形组成的多边形箭头.SDDrawView的箭头样式却不同,SDDrawView箭头样式更类似于QQ截图中的箭头,更加的圆滑更加趋近于现实.接下来,看一下SDDrawView的效果演示图.

![884b321382a91dd5290668d31b6a82b8.png][]

#### SDDrawView快速集成 ####

--------------------

如何快速集成SDDrawView?非常简单,只需要把[SDDrawViewDemo][]下载下来,然后把Demo中的**SDDrawView**文件夹拖到你的工程中,然后如下导入头文件即可.

#import "SDDrawView.h"

SDDrawView初始化也比较简单.我们初始化一个SDDrawView对象然后添加到对应的View视图上即可.

//懒加载的形式初始化(可用可不用~)
    - (SDDrawView *)drawView{
        
        if(_drawView == nil){
            _drawView = [[SDDrawView alloc] initWithFrame:[UIScreen mainScreen].bounds];
            _drawView.drawViewColor = [UIColor whiteColor];//画板颜色
            _drawView.lineWidth = 2.0f;//线条宽度
            _drawView.drawStyle = DrawStyleLine;//样式
            _drawView.lineColor = [UIColor redColor];//线条颜色
        }
        return _drawView;
        
    }

图形样式选择是一个枚举值,只需设定对应的样式,就可绘制不同的图形.

typedef enum : NSUInteger {
        DrawStyleLine,
        DrawStyleSquare,
        DrawStyleCircle,
        DrawStyleArrow
    } DrawStyle;

这里说明一下**SDDrawView**所有的属性和方法.

<table> 
 <thead> 
  <tr> 
   <th align="center">属性或者方法</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">drawViewColor</td> 
   <td align="center">画板颜色</td> 
  </tr> 
  <tr> 
   <td align="center">lineWidth</td> 
   <td align="center">画笔宽度</td> 
  </tr> 
  <tr> 
   <td align="center">drawStyle</td> 
   <td align="center">绘制样式 值为DrawStyle的枚举值</td> 
  </tr> 
  <tr> 
   <td align="center">lineColor</td> 
   <td align="center">画笔颜色</td> 
  </tr> 
  <tr> 
   <td align="center">- (void)cleanAction;</td> 
   <td align="center">清除画板</td> 
  </tr> 
  <tr> 
   <td align="center">- (void)rollbackAction;</td> 
   <td align="center">回退上一步</td> 
  </tr> 
 </tbody> 
</table>

#### SDDrawView原理及箭头绘制 ####

--------------------

**SDDrawView**的核心是使用贝塞尔曲线进行的绘制.通过`touchesBegan` 、`touchesMoved` 、`touchesEnded` 三个方法检测用户的触摸点,然后调用`[self setNeedsDisplay];`方法进行重绘操作.

每一个图形或者每一条线条都是一个**SDBezierPath**对象,一个**SDBezierPath**对象继承于**UIBezierPath**,每一个**SDBezierPath**对象都具有以下的成员变量.

@property(nonatomic,strong) UIColor *lineColor;//绘制颜色
    @property(nonatomic,assign) DrawStyle drawStyle;//绘制样式
    
    @property(nonatomic,assign) CGPoint startPoint;//当是矩形或者是圆的时候,需要使用到这个属性
    @property(nonatomic,assign) CGPoint endPoint;//当是矩形或者是圆的时候,需要使用到这个属性

像线条、矩形、圆形这三种样式还是非常容易实现的,那么如同下面箭头形式的是如何实现的呢?

![绘制分析图][9083d5045cb8a8093425e71b00d2d58b.png]

这里就使用到了**极坐标**的知识,这里可以去看我写的[3D图形:矩阵与线性变换][3D]里面有一部分写到2D变换矩阵,如下图所示.

![e5188aab0ca3eed6f39a0d332d49a448.png][]

为了让各位看官更加直观的了解旋转矩阵公式,我们可以得知假定一个向量 $ \\vec\{u\} $ 的坐标为(x,y),那么经过旋转的 $ \\theta $ 角度之后得到新的向量 $ \\vec\{u’\}  , 那 么 ,那么 ,那么 \\vec\{u’\} $ 的坐标(x’,y’),x’和y’分别是多少呢?

![03500584c3c82f96caa365f828a96a6a.png][]

假设 向量$ \\vec\{u\} $与x的夹角为 $ \\phi $ ,那么 $ x = \\vec\{u\}\\cos\{\\phi\} $ 和 $ y = \\vec\{u\}\\sin\{\\phi\} $ (根据三角函数即可推导~)

那么我们可知$ \\vec\{u’\} $与x轴之间的夹角为 $ \\phi + \\theta$,那么就有一下的推导过程  
$ x’ = \\vec\{u\}\\cos(\\phi + \\theta) = \\vec\{u\}(\\cos\\phi\\cos\\theta - \\sin\\phi\\sin\\theta) = x\\cos\\theta - y\\sin\\theta$  
$ y’ = \\vec\{u\}\\sin(\\phi + \\theta) = \\vec\{u\}(\\sin\\phi\\cos\\theta + \\cos\\phi\\sin\\theta) = x\\sin\\theta + y\\cos\\theta$

**SDDrawView**代码中的体现如下所示.

- (CGPoint)rotateVecWithPx:(float)px py:(float)py ang:(double)ang newLen:(double)newLen{
        
        double vx = px * cos(ang) - py * sin(ang);
        double vy = px * sin(ang) + py * cos(ang);
        double d = sqrt(vx * vx + vy * vy);
        vx = vx / d * newLen;
        vy = vy / d * newLen;
        return CGPointMake((float) vx, (float) vy);
    }

上面原理说的真的是好枯燥,那么久说一下实际过程中是如何处理的,我们通过观看可以知道我们所需要的就是7个点的坐标就可完成一个箭头多边形图形的绘制.我们知道箭头中轴线上的两个坐标,也就是用户开始触摸和结束触摸的两个点.我们可以假定一下箭头的长度比例和属性.例如b和h到中轴线的角度都为30度,长度比例为0.2;c和e到中轴线的角度都为18度,长度比例为0.157;d和f到中轴线的角度都为90度(d和f是相对坐标原点**o’**).长度比例为0.023.如下所示.

//初始化箭头的相关固定值
            KEY_POINT_LEN1 = 70;
            KEY_POINT_LEN2 = 55;
            KEY_POINT_LEN3 = 8;
            KEY_POINT_ANGLE1 = 30 * M_PI/ 180;
            KEY_POINT_ANGLE2 = 18 * M_PI/ 180;
            KEY_POINT_ANGLE3 = 90 * M_PI/ 180;
            KEY_POINT_RATIO1 = 0.2;
            KEY_POINT_RATIO2 = 0.157;
            KEY_POINT_RATIO3 = 0.023;

> 坐标系原点的建立说明: 当需要知道bced四个点的时候,坐标原点就在点a上;当需要知道fd两个点的时候,坐标原点就在点o’上.

通过上面的一系列的准备,接下来我们就可以计算各个点的坐标情况了.代码如下所示.

//配置箭头的6个点位
            double len1 = KEY_POINT_LEN1;
            double len2 = KEY_POINT_LEN2;
            double len3 = KEY_POINT_LEN3;
        
            double len = sqrt(pow((endX - startX), 2) + pow((endY - startY), 2));
            if (len * KEY_POINT_RATIO1 < KEY_POINT_LEN1) {
                len1 = len * KEY_POINT_RATIO1;
            }
            if (len * KEY_POINT_RATIO2 < KEY_POINT_LEN2) {
                len2 = len * KEY_POINT_RATIO2;
            }
            if (len * KEY_POINT_RATIO3 < KEY_POINT_LEN3) {
                len3 = len * KEY_POINT_RATIO3;
            }
            CGPoint arrXY_11 = [self rotateVecWithPx:endX - startX py:endY - startY ang:KEY_POINT_ANGLE1 newLen:len1];
            CGPoint arrXY_12 = [self rotateVecWithPx:endX - startX py:endY - startY ang:-KEY_POINT_ANGLE1 newLen:len1];
            CGPoint arrXY_21 = [self rotateVecWithPx:endX - startX py:endY - startY ang:KEY_POINT_ANGLE2 newLen:len2];
            CGPoint arrXY_22 = [self rotateVecWithPx:endX - startX py:endY - startY ang:-KEY_POINT_ANGLE2 newLen:len2];
            CGPoint arrXY_31 = [self rotateVecWithPx:startX - endX py:startY - endY ang:KEY_POINT_ANGLE3 newLen:len3];
            CGPoint arrXY_32 = [self rotateVecWithPx:startX - endX py:startY - endY ang:-KEY_POINT_ANGLE3 newLen:len3];;
            
            //转换到原始坐标系中
            float x11 = endX - arrXY_11.x;
            float y11 = endY - arrXY_11.y;
            float x12 = endX - arrXY_12.x;
            float y12 = endY - arrXY_12.y;
            float x21 = endX - arrXY_21.x;
            float y21 = endY - arrXY_21.y;
            float x22 = endX - arrXY_22.x;
            float y22 = endY - arrXY_22.y;
            float x31 = startX - arrXY_31.x;
            float y31 = startY - arrXY_31.y;
            float x32 = startX - arrXY_32.x;
            float y32 = startY - arrXY_32.y;

然后我们只需要把我们的这7个点添加到UIBezierPath对象即可.

[self moveToPoint:endPoint];
            [self addLineToPoint:CGPointMake(x11, y11)];
            [self addLineToPoint:CGPointMake(x21, y21)];
            [self addLineToPoint:CGPointMake(x32, y32)];
            [self addLineToPoint:CGPointMake(x31, y31)];
            [self addLineToPoint:CGPointMake(x22, y22)];
            [self addLineToPoint:CGPointMake(x12, y12)];

#### 结束 ####

--------------------

**SDDrawView**的分享就到这里了,如果需要欢迎下载收藏点赞. 如果有任何问题欢迎指导批评,我会及时回复的.最后添加上github的传送门.感谢查看本篇博客.

#### [→SDDrawView传送门][SDDrawViewDemo] ####

![1cc773b3510614b54c92ffc3dc40d24a.gif][]

[9afda1f05287d07ccd7e4fb1e5e446a6.png]: /images/20221119/1fc6d08c9f8a4e27b039ad580b09e228.png
[884b321382a91dd5290668d31b6a82b8.png]: /images/20221119/74096d2bccf64b189c8139fea3908ba0.png
[SDDrawViewDemo]: https://github.com/wang82426107/SDDrawView
[9083d5045cb8a8093425e71b00d2d58b.png]: https://img-blog.csdnimg.cn/img_convert/9083d5045cb8a8093425e71b00d2d58b.png
[3D]: https://www.jianshu.com/p/6c2c0542071d
[e5188aab0ca3eed6f39a0d332d49a448.png]: https://img-blog.csdnimg.cn/img_convert/e5188aab0ca3eed6f39a0d332d49a448.png
[03500584c3c82f96caa365f828a96a6a.png]: https://img-blog.csdnimg.cn/img_convert/03500584c3c82f96caa365f828a96a6a.png
[1cc773b3510614b54c92ffc3dc40d24a.gif]: https://img-blog.csdnimg.cn/img_convert/1cc773b3510614b54c92ffc3dc40d24a.gif