Hướng dẫn flag trong c++

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

class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
0 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
class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
2 được truyền vào. Sử dụng
class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
3 và xét
class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
4 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:

    • Basic iOS tutorial : Drawing

Trong bài demo này, mình sẽ sử dụng phương pháp vẽ với

class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
6 và
class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
7

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..
Bạn sẽ override lại function
class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
7 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ó

class StarView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}
9. 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

Hướng dẫn flag trong c++

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:

Hướng dẫn flag trong c++

 

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.