CAShaperLayer&UIBezierPath系列（一）

yelan_發表於2019-03-15
UI

CAShaperLayer&UIBezierPath簡介

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

CAShaperLayer

蘋果官方的定義：A layer that draws a cubic Bezier spline in its coordinate space.

繼承於CALayer。 每個CAShapeLayer物件都代表著將要被渲染到螢幕上的一個任意的形狀(shape)。

同時CAShaperLayer具有以下特點：

  1. CAShapeLayer可以被觸碰和填充，並且CAShapeLayer可以通過Path屬性進行形狀的調節
  2. CAshapeLayer具有許多動畫特性，與UIBezierPath結合，可以輕鬆定製你想要的圖形
  3. CAshapeLayer能在GPU上渲染，提升效率，減少CPU的負擔

Note:

Shape rasterization may favor speed over accuracy. For example, pixels with multiple intersecting path segments may not give exact results.

由於CAShapeLayer更喜歡速度超過準確性，所以用CAShapeLayer繪製的圖形會出現鋸齒。(如果不用放大鏡的話，應該很難看出區別)

問題的描述

常用屬性的介紹

1.CGPathRef path

/* The path defining the shape to be rendered. If the path extends
 * outside the layer bounds it will not automatically be clipped to the
 * layer, only if the normal layer masking rules cause that. Upon
 * assignment the path is copied. Defaults to null. Animatable.
 * (Note that although the path property is animatable, no implicit
 * animation will be created when the property is changed.) */
複製程式碼

path定義了形狀的渲染，如果路徑超過layer的bounds,那麼那部分的path將不會在layer上顯示。同時path在賦值的時候將會進行深拷貝。預設值為空。請注意，儘管path屬性是可動畫的，但在更改屬性時不會建立隱式動畫。

隱式動畫

當對非Root Layer的部分屬性進行修改時，預設會自動產生一些動畫效果，而這些屬性稱為Animatable Properties(可動畫屬性)

  • bounds：用於設定CALayer的寬度和高度。修改這個屬性會產生縮放動畫
  • backgroundColor：用於設定CALayer的背景色。修改這個屬性會產生背景色的漸變動畫
  • position：用於設定CALayer的位置。修改這個屬性會產生平移動畫

可以通過動畫事務CATransaction關閉預設的隱式動畫效果

 [CATransaction begin];
 [CATransaction setDisableActions:YES];
 self.myview.layer.position = CGPointMake(10, 10);
 [CATransaction commit];

複製程式碼

2.CGFloat strokeStart && CGFloat strokeEnd

/* These values define the subregion of the path used to draw the

* stroked outline. The values must be in the range [0,1] with zero

* representing the start of the path and one the end. Values in

* between zero and one are interpolated linearly along the path

* length. strokeStart defaults to zero and strokeEnd to one. Both are

* animatable. */

  • strokeStart它表示描線開始的地方佔總路徑的百分比
  • 對比strokeStart stokeEnd代表了繪製結束的地方站總路徑的百分比

UIBezierPath

A path that consists of straight and curved line segments that you can render in your custom views.

UIBezierPath物件是CGPathRef資料型別的封裝。有兩種使用方式：

1.重寫view的drawRect方法

- (void)drawRect:(CGRect)rect {
    
    UIColor *color = [UIColor redColor];
    [color set]; //設定線條顏色
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(200, 80)];
   
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理
    
    [path stroke];
}
複製程式碼
  • path.lineWidth = 5.0設定劃線的寬度
  • path.lineCapStyle終點的樣式
    • kCGLineCapButt 該屬性值指定不繪製端點， 線條結尾處直接結束。這是預設值
    • kCGLineCapRound該屬性值指定繪製圓形端點， 線條結尾處繪製一個直徑為線條寬度的半圓。
    • kCGLineCapSquare該屬性值指定繪製方形端點。 線條結尾處繪製半個邊長為線條寬度的正方形。需要說明的是，這種形狀的端點與“butt”形狀的端點十分相似，只是採用這種形式的端點的線條略長一點而已
  • path.lineJoinStyle 設定兩條線連結點的樣式
    • kCGLineJoinMiter 斜接
    • kCGLineJoinRound 圓滑銜接
    • kCGLineJoinBevel 斜角連線
  • [path stroke] 描邊
  • [path fill] 填充邊框內部

2.結合CAShaperLayer進行使用

	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];
複製程式碼
  • stokeColor 設定圖形邊框的顏色
  • fillColor 設定圖形填充的顏色，如果不設定，預設為stokeColor

CAShaperLayer&UIBezierPath系列（一）

相關文章