Chào bạn đến với Fx Studio. Hôm nay là ngày 2/9, ngày quốc khánh của Việt Nam. Thì để kỷ niệm ngày quốc khánh, mình sẽ hướng dẫn bạn vẽ quốc kỳ Việt Nam bằng ngôn ngữ lập trình Swift với Playground.
Bắt đầu thôi!
Chuẩn bị
Chúng ta sẽ thực hiện đơn giản và trên Playground để thao tác trực quan. Sau đây là thông số phiên bản mình sử dụng:
- Xcode 11
- Swift 5.x
- Playground
1. Hiển thị View trên Playground
Playground là công cụ tuyệt với cho các bạn học Swift. Nó hỗ trợ nhiều và nhanh, bạn có thể thấy giá trị biến, các vòng lặp và kết quả hiển thị bên cạnh. Tuy nhiên, đó là code và trên console. Còn với UI thì như thế nào.
Trước tiên, chúng ta cần phải thêm một số cài đặt để có thể hiển thị một UIView lên trên Playground.
import UIKit import PlaygroundSupport
Chúng ta thêm 2 thư viện trên vào. Với UIKit thì khá quen thuộc với bạn rồi. Còn PlaygroundSupport sẽ giúp bạn hiển thị một view.
Tiếp tục chúng ta tạo 1 sub-class kế thừa từ UIView. Đặt tên là StarView. Tiện thể ta tô màu nền backgroundColor là màu đỏ.
class StarView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .red
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Giờ sang phần tạo đối tượng của StarView và đưa chúng hiển thị lên nào.
let view = StarView(frame: CGRect(x: 0, y: 0, width: 600, height: 300)) PlaygroundPage.current.liveView = view PlaygroundPage.current.needsIndefiniteExecution = true
Đối tượng view thuộc class StarView với frame được truyền vào. Sử dụng PlaygroundPage.current và xét liveView chính là đối tượng view vừa tạo. Bạn bấm thực thi và cảm nhận kết quả nào.
2. Vẽ
Về phần vẽ, nếu bạn nào chưa biết các Custom UIView bằng phương pháp Drawing thì có thể xem lại bài viết sau:
Trong bài demo này, mình sẽ sử dụng phương pháp vẽ với UIBezierPath và draw(rect:)
2.1. Tạo Path
Trước khi tạo path thì cần xem qua The flag of Viet Nam là như thế nào.
Quốc kỳ Việt Nam (còn gọi là “Cờ đỏ sao vàng” hay “Cờ Tổ quốc”) hiện nay được công nhận chính thức từ 1976, là lá cờ đại diện cho nước Việt Nam thống nhất. Lá cờ có hình chữ nhật, chiều rộng bằng 2/3 chiều dài, nền đỏ, ở giữa có ngôi sao vàng 5 cánh.
Theo wikipedia.
Vì chủ đạo là 1 ngôi sao 5 cánh. Do đó, việc cần thiết là phải tạo 1 Path là 1 Polygon, gồm nhiều đường thẳng nối tiếp nhau tạo thành 1 hình đa giác.
override func draw(_ rect: CGRect) {
//create path
let path = UIBezierPath()
let xCenter: CGFloat = rect.size.width/2
let yCenter: CGFloat = rect.size.height/2
let w = CGFloat(rect.height/2)
let r = w / 2.0
let flip: CGFloat = -1.0
let polySide = CGFloat(5)
let theta = 2.0*Double.pi*Double(2.0/polySide)
path.move(to: CGPoint(x: xCenter, y: r*flip+yCenter))
for i in 1..<Int(polySide) {
let x: CGFloat = r*CGFloat(sin(Double(i)*theta))
let y: CGFloat = r*CGFloat(cos(Double(i)*theta))
path.addLine(to: CGPoint(x: x+xCenter, y: y*flip+yCenter))
}
path.close()
}
Bạn sẽ override lại function draw(rect:) của UIView. Trong đó, bạn tạo Path và lần lượt tạo các cạnh của ngôi sao. Khá đơn giản phải không nào. Chi tiết sao thì bạn hãy ngâm cứu nha. Còn copy đoạn code trên là phương pháp nhanh nhất.
2.2. Stroke line
Khi bạn thực thi chương trình, nó sẽ không hiển thị gì cả. Bạn cần phải vẽ nó stroke. Muốn vậy bạn phải xét các giá trị cần thiết là màu và kích thước đường thẳng.
// stroke UIColor.yellow.set() path.lineWidth = 2.0 path.stroke()
Kết quả như sau
2.3. Fill color
Quốc kỳ đúng là phải tô màu vàng cho ngôi sao. Bạn thực hiện việc tô màu cũng tương tự như trên. Thêm các tham số cần cho việc tô màu.
// fill let fillColor = UIColor.yellow fillColor.setFill() path.fill()
Kết quả cuối cùng như sau:
Hoàn thành rồi nhoé. Cũng khá là đơn giản. Chúc bạn có ngày nghỉ lễ vui vẻ bên gia đình và bạn bè. Ngoài ra bạn có thể checkout code tại đây.
Hoặc bạn có thể xem video demo sinh động và trực quan hơn nhiều.
Tạm kết
- Cách hiển thị một UIView lên Playground
- Cách vẽ một ngôi sao 5 cánh
Cảm ơn bạn đã đọc bài viết này!
Related Posts:
Leave a Reply
Donate – Buy me a coffee!
