CAShaperLayer&UIBezierPath系列（二）

yelan_發表於2019-03-16
UI

CAShaperLayer&UIBezierPath畫基本圖形

使用 UIbezierPath 和 CAShapeLayer 可以畫出你想要的任何形狀，沒有它做不到，只有你想不到，搞定了它們你就可以輕鬆定製你想要的任何控制元件了。

原文出處:(www.jianshu.com/p/c5cbb5e05…)

CAShaperLayer&UIBezierPath畫多邊形

1.畫矩形

	UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110, 100, 150, 100)];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
複製程式碼

2.畫橢圓

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(120, 20, 100, 80) cornerRadius:40];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor whiteColor].CGColor;
    [self.view.layer addSublayer:layer];
複製程式碼

3.畫直線

	UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 130)]; //起點
    [path addLineToPoint:CGPointMake(300, 130)]; //終點
    [path closePath];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.lineWidth = 5.0f; //設定行寬
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor blackColor].CGColor; //設定線條顏色
    [self.view.layer addSublayer:layer];
複製程式碼
  • 注意通過UIBezierPath設定行高和樣色，將會不起作用

4.畫曲線

    CGPoint startPoint = CGPointMake(20, 250); 
    CGPoint endPoint = CGPointMake(300, 250);
    CGPoint controlPoint = CGPointMake(160, 150);
    
    CAShapeLayer *layer1 = [CAShapeLayer layer];
    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
    layer1.backgroundColor = [UIColor redColor].CGColor;
    
    CAShapeLayer *layer2 = [CAShapeLayer layer];
    layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
    layer2.backgroundColor = [UIColor redColor].CGColor;
    
    CAShapeLayer *layer3 = [CAShapeLayer layer];
    layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);
    layer3.backgroundColor = [UIColor redColor].CGColor;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    CAShapeLayer *layer = [CAShapeLayer layer];
    
    [path moveToPoint:startPoint];
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
    
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    
    [self.view.layer addSublayer:layer];
    [self.view.layer addSublayer:layer1];
    [self.view.layer addSublayer:layer2];
    [self.view.layer addSublayer:layer3];
複製程式碼

CAShaperLayer&UIBezierPath系列（二）

CAShaperLayer&UIBezierPath範例

1.時光網App

CAShaperLayer&UIBezierPath系列（二）


	[self.view setBackgroundColor:[UIColor lightGrayColor]];
    
    CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 400);
    CGFloat layerHeight = finalSize.height * 0.2;
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *bezier = [UIBezierPath bezierPath];
    [bezier moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];
    [bezier addLineToPoint:CGPointMake(0, finalSize.height - 1)];
    [bezier addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];
    [bezier addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
    [bezier addQuadCurveToPoint:CGPointMake(0,finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
    
    
    layer.path = bezier.CGPath;
    layer.fillColor = [UIColor whiteColor].CGColor;
    [self.view.layer addSublayer:layer];
    
    //注意Layer層級關係 
    [self markPoint:CGPointMake(finalSize.width - 5, finalSize.height - layerHeight)];
    [self markPoint:CGPointMake(finalSize.width - 5, finalSize.height - 1)];
    [self markPoint:CGPointMake(0, finalSize.height - 1)];
    [self markPoint:CGPointMake(0, finalSize.height - layerHeight)];
    [self markPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
	
複製程式碼

CAShaperLayer&UIBezierPath系列（二）

2.微信（下拉的眼睛）

  • 建立Layer的程式碼
- (CAShapeLayer *)eyeFirstLightLayer {
    if (!_eyeFirstLightLayer) {
        _eyeFirstLightLayer = [CAShapeLayer layer];
        CGPoint center = eyeCenter;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
                                                            radius:eyeSize.width * 0.2
                                                        startAngle:(230.f / 180.f) * M_PI
                                                          endAngle:(265.f / 180.f) * M_PI
                                                         clockwise:YES];
        _eyeFirstLightLayer.borderColor = [UIColor blackColor].CGColor;
        _eyeFirstLightLayer.lineWidth = 5.f;
        _eyeFirstLightLayer.path = path.CGPath;
        _eyeFirstLightLayer.fillColor = [UIColor clearColor].CGColor;
        _eyeFirstLightLayer.strokeColor = [UIColor whiteColor].CGColor;
    }
    return _eyeFirstLightLayer;
}

- (CAShapeLayer *)eyeSecondLightLayer {
    if (!_eyeSecondLightLayer) {
        _eyeSecondLightLayer = [CAShapeLayer layer];
        CGPoint center = eyeCenter;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
                                                            radius:eyeSize.width * 0.2
                                                        startAngle:(211.f / 180.f) * M_PI
                                                          endAngle:(220.f / 180.f) * M_PI
                                                         clockwise:YES];
        _eyeSecondLightLayer.borderColor = [UIColor blackColor].CGColor;
        _eyeSecondLightLayer.lineWidth = 5.f;
        _eyeSecondLightLayer.path = path.CGPath;
        _eyeSecondLightLayer.fillColor = [UIColor clearColor].CGColor;
        _eyeSecondLightLayer.strokeColor = [UIColor whiteColor].CGColor;
        
    }
    return _eyeSecondLightLayer;
}

- (CAShapeLayer *)eyeballLayer {
    if (!_eyeballLayer) {
        _eyeballLayer = [CAShapeLayer layer];
        CGPoint center = eyeCenter;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
                                                            radius:eyeSize.width * 0.3
                                                        startAngle:(0.f / 180.f) * M_PI
                                                          endAngle:(360.f / 180.f) * M_PI
                                                         clockwise:YES];
        _eyeballLayer.borderColor = [UIColor blackColor].CGColor;
        _eyeballLayer.lineWidth = 1.f;
        _eyeballLayer.path = path.CGPath;
        _eyeballLayer.fillColor = [UIColor clearColor].CGColor;
        _eyeballLayer.strokeColor = [UIColor whiteColor].CGColor;
        _eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
        
    }
    return _eyeballLayer;
}

- (CAShapeLayer *)topEyesocketLayer {
    if (!_topEyesocketLayer) {
        _topEyesocketLayer = [CAShapeLayer layer];
        CGPoint center = eyeCenter;
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(eyeCenter.x - eyeSize.width * 0.5, eyeCenter.y)];
        [path addQuadCurveToPoint:CGPointMake(eyeCenter.x + eyeSize.width * 0.5, eyeCenter.y)
                     controlPoint:CGPointMake(eyeCenter.x, center.y - eyeSize.width * 0.3 - 23)];
        _topEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
        _topEyesocketLayer.lineWidth = 1.f;
        _topEyesocketLayer.path = path.CGPath;
        _topEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
        _topEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
    }
    return _topEyesocketLayer;
}

- (CAShapeLayer *)bottomEyesocketLayer {
    if (!_bottomEyesocketLayer) {
        _bottomEyesocketLayer = [CAShapeLayer layer];
        CGPoint center = eyeCenter;
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(eyeCenter.x - eyeSize.width * 0.5, eyeCenter.y)];
        [path addQuadCurveToPoint:CGPointMake(eyeCenter.x + eyeSize.width * 0.5, eyeCenter.y)
                     controlPoint:CGPointMake(eyeCenter.x , center.y + eyeSize.width * 0.3 + 23)];
        _bottomEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
        _bottomEyesocketLayer.lineWidth = 1.f;
        _bottomEyesocketLayer.path = path.CGPath;
        _bottomEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
        _bottomEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
        
    }
    return _bottomEyesocketLayer;
}
複製程式碼

  • 根據ScrollView的contentOffset.y來繪製圖形

    CGFloat flag = self.view.frame.origin.y * 2.0f - 20.0f;
    if(y < flag){
        if (self.eyeFirstLightLayer.lineWidth < 5.0f) {
            self.eyeFirstLightLayer.lineWidth += 1.0f;
            self.eyeSecondLightLayer.lineWidth += 1.0f;
        }
    }
    
    if (y < flag - 20) {
        if (self.eyeballLayer.opacity <= 1.0f) {
            self.eyeballLayer.opacity += 0.1f;
        }
    }
    
    if (y < flag - 40) {
        if (self.topEyesocketLayer.strokeEnd < 1.0f && self.topEyesocketLayer.strokeStart > 0.0f) {
            self.topEyesocketLayer.strokeEnd += 0.1f;
            self.topEyesocketLayer.strokeStart -= 0.1f;
            
            self.bottomEyesocketLayer.strokeEnd += 0.1f;
            self.bottomEyesocketLayer.strokeStart -= 0.1f;
        }
    }
    
    if (y > flag - 40) {
        if (self.topEyesocketLayer.strokeEnd > 0.5f && self.topEyesocketLayer.strokeStart < 0.5f) {
            self.topEyesocketLayer.strokeEnd -= 0.1f;
            self.topEyesocketLayer.strokeStart += 0.1f;
            
            self.bottomEyesocketLayer.strokeEnd -= 0.1f;
            self.bottomEyesocketLayer.strokeStart += 0.1f;
        }
    }
    
    if (y > flag - 20) {
        if (self.eyeballLayer.opacity >= 0.0f) {
            self.eyeballLayer.opacity -= 0.1f;
        }
    }
    
    if (y > flag) {
        if (self.eyeFirstLightLayer.lineWidth > 0.f) {
            self.eyeFirstLightLayer.lineWidth -= 1.f;
            self.eyeSecondLightLayer.lineWidth -= 1.f;
        }
    }
複製程式碼

CAShaperLayer&UIBezierPath系列（二）

  • 其中strokeStart和strokeEnd這兩個屬性需要特別注意

    • stokeStart (The relative location at which to begin stroking the path. Animatable.)

      • 描線開始的地方佔總路徑的百分比

    • stokeEnd (The relative location at which to stop stroking the path. Animatable.)

      • 繪製結束的地方站總路徑的百分比 預設值為1

CAShaperLayer&UIBezierPath系列（二）

相關文章