iOS UIView add edges of jagged and wavy lines

Keywords: iOS

1. ios adds jagged edge to UIView
It is mainly to calculate the position of the sawtooth point on the View, and then fill it in. The code is as follows:

 UIBezierPath *path = [UIBezierPath bezierPath];
            path.lineWidth = borderWidth;
            NSInteger x = 0;
            NSInteger y = (borderPosition == kBorderPositionTop) ? borderWidth : CGRectGetHeight(self.frame) - borderWidth;
            [path moveToPoint:CGPointMake(x, y)];
            NSUInteger verticalDisplacement = self.jaggedEdgeVerticalVertexDistance ?: DefaultJaggedEdgeVerticalVertexDistance;
            NSUInteger horizontalDisplacement = self.jaggedEdgeHorizontalVertexDistance ?: DefaultJaggedEdgeHorizontalVertexDistance;

            verticalDisplacement *= (borderPosition == kBorderPositionTop) ? +1 : -1;

            BOOL shouldMoveUp = YES;
            while (x <= CGRectGetWidth(self.frame)) {
                x += horizontalDisplacement;
                if (type == kCurveBorderTypeJagged) {
                    if (shouldMoveUp) {
                        y += verticalDisplacement;
                    }
                    else
                    {
                        y -= verticalDisplacement;
                    }
                    [path addLineToPoint:CGPointMake(x, y)];
                }else if (type == kCurveBorderTypeCurve){

                    NSInteger newY = y+verticalDisplacement;
                    if (shouldMoveUp)
                    {
                        newY += verticalDisplacement;
                    }
                    else
                    {
                        newY -= verticalDisplacement;
                    }
                    [path addQuadCurveToPoint:CGPointMake(x, y+verticalDisplacement) controlPoint:CGPointMake(x-horizontalDisplacement/2.0, newY)];
                }
                shouldMoveUp = !shouldMoveUp;
            }
            CGFloat offSet = 2 * borderWidth;
            x = CGRectGetWidth(self.frame) + offSet;
            y = (borderPosition == kBorderPositionTop) ? -offSet : CGRectGetHeight(self.frame) + offSet;
            [path addLineToPoint:CGPointMake(x,y)];
            x = -offSet;
            [path addLineToPoint:CGPointMake(x, y)];
            [strokeColor setStroke];
            [self drawBezierPath:path];

The main thing here is to judge which edge to add sawtooth, and the position calculation of each edge point will be different.
2. ios adds wavy line edge to UIView
The difference between this and zigzag edge is that the way to add points is different from the way to calculate the positions of points,

[path addQuadCurveToPoint:CGPointMake(x, y+verticalDisplacement) controlPoint:CGPointMake(x-horizontalDisplacement/2.0, newY)];

It's no use saying more. Go to demo directly demo download address

Posted by Gwayn on Sat, 04 Apr 2020 13:29:40 -0700