iOS -- 绘制虚线

虚线标注某个点

IBezierPath *dashPath = [UIBezierPath bezierPath];
    [dashPath moveToPoint: CGPointMake(startPointX, startPonitY)];
    [dashPath addLineToPoint: CGPointMake(endPointX, endPointY)];
    dashPath.lineWidth = 1;
    CGFloat dashLineConfig[] = {2.0, 1.0};
    [dashPath setLineDash: dashLineConfig count: 2 phase: 2];
    UIColor *dashColor = [UIColor colorWithRed:0.31 green:0.30 blue:0.67 alpha:1];
    [dashColor setStroke];
    [dashPath stroke];

虚线画按钮边框

///< 画button外面的蓝色虚线框
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    CAShapeLayer *border = [CAShapeLayer layer];
    border.strokeColor = JYBColor_Blue.CGColor;
    border.fillColor = nil;
    border.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:20].CGPath;
    border.frame = self.bounds;
    border.lineWidth = 0.5;
    border.lineCap = @"square";
    border.lineDashPattern = @[@2, @2];
    [self.layer addSublayer:border];
}

两种方法不同, 第一个是用贝塞尔曲线来画, 第二个是用CAShapeLayer来画.
其实还可以用CoreGraphic框架来画. 但其实CG框架和贝塞尔曲线是一个套路, OC中的UIBezierPath其实就是对C语言的CG框架的封装.

所以这里只需要介绍贝塞尔曲线的画法就可以了

- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;

画虚线主要就是这个方法了
第一个参数pattern:

A C-style array of floating point values that contains the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.

就是一个C的数组, 以点为单位, 表明了一种模式:
{第一条线段的长度, 第一个间隔的长度, 第二条线段的长度...} 以此类推

比如:
｛10,10｝表示先绘制10个点，再跳过10个点，如此反复，如图:

｛10, 20, 10｝，则表示先绘制10个点，跳过20个点，绘制10个点，跳过10个点，再绘制20个点，如此反复，如图：

第二个参数count: 表示这个C数组的长度

第三个参数phase:

The offset at which to start drawing the pattern, measured in points along the dashed-line pattern. For example, a phase value of 6 for the pattern 5-2-3-2 would cause drawing to begin in the middle of the first gap.

phase参数表示在第一个虚线绘制的时候跳过多少个点, 比如文档中说明的当phase为6时, 如果pattern是5-2-3-2的话, 那么就会从第1个gap的中间开始画这条虚线.

但理解了这个方法之后, 画线段就跟画直线一样简单了

另外, CAShapeLayer的lineDashPattern属性其实也就跟上述方法中的pattern参数一样了. 大家举一反三就好了.

UIBezierPath *dashPath = [UIBezierPath bezierPath];
    [dashPath moveToPoint: CGPointMake(10, 10)];
    [dashPath addLineToPoint: CGPointMake(200, 200)];
    dashPath.lineWidth = 6;
    CGFloat dashLineConfig[] = {10, 5,15,20};
    [dashPath setLineDash: dashLineConfig count:5 phase:0];
    UIColor *dashColor = [UIColor colorWithRed:0.31 green:0.30 blue:0.67 alpha:1];
    [dashColor setStroke];
    [dashPath stroke];
    
    UIBezierPath *dashPath1 = [UIBezierPath bezierPath];
    [dashPath1 moveToPoint: CGPointMake(50, 10)];
    [dashPath1 addLineToPoint: CGPointMake(250, 200)];
    dashPath1.lineWidth = 6;
    CGFloat dashLineConfig1[] = {10, 5,15,20,0.001};
    [dashPath1 setLineDash: dashLineConfig1 count:5 phase:0];
    UIColor *dashColor1 = [UIColor colorWithRed:0.31 green:0.30 blue:0.67 alpha:1];
    [dashColor1 setStroke];
    [dashPath1 stroke];