Phần 1 của loạt bài viết về CAShapeLayer đã nói về cách vẽ đường thẳng, các hình khối.
Ở phần 2 này, mình sẽ nói về những attribute quan trọng, thường được sử dụng của CAShapeLaye.
Content
- Stroke
- Fill Color
- Line
Stroke
Stroke Color
- strokeColor là thuộc tính để set màu cho đường line của 1 đường thẳng, hình khối.
- Ex: Để vẽ 1 hình vuông có các đường thẳng màu xanh thì chỉ cần thêm dòng code dưới đây khi vẽ hình:
shapeLayer.strokeColor = UIColor.blue.cgColorCode vẽ hình vuông:
func createSquare() {
let shapeLayer = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: 0.0, y: 0.0))
path.addLine(to: CGPoint(x: 100.0, y: 0.0))
path.addLine(to: CGPoint(x: 100.0, y: 100.0))
path.addLine(to: CGPoint(x: 0.0, y: 100.0))
path.close() // creating a line segment between the first point and current point
shapeLayer.path = path.cgPath
shapeLayer.fillColor = nil
shapeLayer.strokeColor = UIColor.blue.cgColor
layer.addSublayer(shapeLayer)
}
Stroke Start & Stroke End
-
Ok, vậy là bạn đã biết cách tạo 1 path và gán path đó cho shapeLayer.
-
Nếu coi việc vẽ 1 path từ đầu đến cuối là 100% công việc, vậy giả sử nếu bạn chỉ muốn vẽ được 40, 50 hay 60% của công việc đó?
-> strokeStart và strokeEnd sinh ra là để giúp bạn làm điều đó. -
strokeStart: Chạy trong khoảng 0 đến 1, giá trị default là 0, tức là sẽ vẽ từ đầu.
-
strokeEnd: Chạy trong khoảng 0 đến 1, giá trị default là 1, tức là sẽ vẽ cho đến cuối cùng.
-
Khi bắt đầu công việc vẽ thì sẽ bắt đầu từ strokeStart đến strokeEnd.
Vẫn đoạn code vẽ hình vuông ở trên, giả sử bạn chỉ muốn vẽ từ đầu cho đến 70% công việc thì thêm dòng code sau:
shapeLayer.strokeEnd = 0.7
Còn nếu bạn muốn vẽ từ 30% công việc đến 100% công việc thì chỉ cần set strokeStart:
shapeLayer.strokeStart = 0.3
Bạn có thể kết hợp cả strokeStart và strokeEnd tùy ý.
Ngoài ra, strokeStart và strokeEnd còn có thể để dùng để tạo animation. Phần animation này sẽ nói ở bài viết sau.
Fill Color
- fillColor là thuộc tính dùng để thay đổi màu cho phần bên trong của 1 hình khối.
- Ở phần 1, mình đã có vẽ 1 hình tròn có đường line màu đỏ và phần bên trong không màu. Giờ thì hãy set màu cho phần bên trong hình tròn bằng cách thêm dòng code:
shapeLayer.fillColor = UIColor.yellow.cgColorCode vẽ hình tròn:
private func createCircle() {
let shapeLayer = CAShapeLayer()
shapeLayer.lineWidth = 2.0
shapeLayer.fillColor = UIColor.yellow.cgColor
shapeLayer.strokeColor = UIColor.red.cgColor
let openCirclePath = UIBezierPath(arcCenter: CGPoint(x: 60.0, y: 60.0),
radius: 60.0,
startAngle: 0.0,
endAngle: CGFloat.pi * 2,
clockwise: true)
shapeLayer.path = openCirclePath.cgPath
layer.addSublayer(shapeLayer)
}
Kể cả đối với các hình không kín thì việc set fillColor vẫn cứ là OK nhé :
Line
Line Width
Nghe cái tên thôi là đã biết attribute này để làm gì rồi 🙂 Đó là set width cho path dùng để vẽ đường thẳng, hình khối. Thêm dòng code sau vào đoạn code vẽ hình tròn:
shapeLayer.lineWidth = 20.0Kết quả thu được:
Line Cap
thuộc tính lineCap sẽ quyết định xem điểm cuối của 1 open path được vẽ như thế nào: butt, round hay square.
Hình dưới đây lần lượt là hình của shapeLayer sau khi set lineCap thành butt, round và square:
Để set thuộc tính lineCap cho shapeLayer thì thêm dòng code:
shapeLayer.lineCap = .round hoặc .butt hoặc .square
.round 
.square
Line Dash Pattern
- Thuộc tính lineDashPattern giúp bạn vẽ những đường thẳng đứt đoạn chứ không phải là 1 đường thẳng liền mạch.
- lineDashPattern là 1 mảng các số định nghĩa độ dài nét liền và nét đứt bạn muốn vẽ.
Giả sử bạn muốn vẽ 1 đường thẳng đứt đọan như sau: Cứ vẽ được 1 nét dài 5 thì sẽ đứt đoạn 1 khoảng 15 thì set lineDashPattern như sau:
shapeLayer.lineDashPattern = [5, 15]
Hoặc nếu bạn muốn vẽ 1 nét dài 5 rồi đến 1 nét đứt 10, rồi vẽ 1 nét dài 15 và 1 nét đứt dài 20:
shapeLayer.lineDashPattern = [5, 10, 15, 20]
Cấu trúc lineDashPattern bạn cung cấp sẽ được lặp lại cho đến khi vẽ xong hình.
Line Dash Phase
"Line dash phase specifies how far into the dash pattern the line starts." – Apple
- Có thể hiểu đơn giản là lineDashPhase là 1 thuộc tính sẽ cho bạn dịch điểm bắt đầu vẽ đi 1 khoảng bạn muốn. Độ dài của path sẽ không thay đổi.
- lineDashPattern có default value = 0.
let circleShapeLayer1 = ...
circleShapeLayer1.lineWidth = 2.0
circleShapeLayer1.lineDashPattern = [47.12]
let circleShapeLayer2 = ...
circleShapeLayer2.lineWidth = 2.0
circleShapeLayer2.lineDashPattern = [47.12]
circleShapeLayer2.lineDasePhase = 23.56
let circleShapeLayer3 = ...
circleShapeLayer3.lineWidth = 2.0
circleShapeLayer3.lineDashPattern = [47.12]
circleShapeLayer3.lineDasePhase = -23.56Ở bài viết tiếp theo, mình sẽ nói về animation của CAShapeLayer.
refer: https://www.calayer.com/core-animation/2016/05/22/cashapelayer-in-depth.html