iOS SwiftUI 客製化多邊形圖片

簡要

先找到一張想要畫的多邊形圖片

在運用GeoGebra網頁,然後描邊,在按照順序填入

1. 將圖片導入GeoGebra網站,生成座標

先點選數字1,右邊的框框就會對應到相對的位置
先把圖片A與B座標,設定在右下角
方便iOS之後導入座標
快速顯示所有圖片
不小心用錯了可以按這裡還原/重做
點選1,按複製,或者ctrl+c
之後ctrl+v貼上時,會重疊再一起
像這樣描外誆
按順序排
記得如果有圓角要描仔細一點
顯示的圖片才會好看
描完後,左側就有座標囉

按照上面的方法做完後,接下來就回到XCode,這些座標就是畫圖用的

2.將座標畫出來

首先將剛剛網站上畫的軌跡,x與y座標寫成一個Funcion,如下方程式碼內的createPath

注意:剛剛網站的Y是負數,iOS要改為正數

因為網站是第四象限,iOS是左上角是(0,0),往下往右是遞增

放置struct ShowUIView: UIViewRepresentable裡面

struct ShowUIView: UIViewRepresentable {
    func createPath() -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(
                    x: 10,
                    y: 20))
        path.addLine(to: CGPoint(
                        x: 5.0131866949857,
                        y: 19.9479187627672))
        path.addLine(to: CGPoint(
                        x: 5.0417361556575,
                        y: 12.1197330991145))
        path.addLine(to: CGPoint(
                        x: 2.0710520438094,
                        y: 12.0451656773068))
        path.addLine(to: CGPoint(
                        x: 12.0363540202362,
                        y: 3.0948821110817))
        path.addLine(to: CGPoint(
                        x: 22,
                        y: 12))
        path.addLine(to: CGPoint(
                        x: 19.030971884815,
                        y: 12.069872043932))
        path.addLine(to: CGPoint(
                        x: 19.030971884815,
                        y: 19.7983355972197))
        path.addLine(to: CGPoint(
                        x: 14,
                        y: 20))
        path.addLine(to: CGPoint(
                        x: 14,
                        y: 14))
        path.addLine(to: CGPoint(
                        x: 10,
                        y: 14))
        path.close()
        
        return path
    }
    func getViewbyPath(type: Int) -> UIView {
        let path = createPath()
        let view = UIView()
        let backgroundView = UIView(
            frame: CGRect(
                x: 0,
                y: 0,
                width: 24,
                height: 24)
        )
        
        let orangeView = UIView(frame: backgroundView.frame)
        orangeView.backgroundColor =
            UIColor(
                red: 255/255,
                green: 82/255,
                blue: 0/255, alpha: 1
            )
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        //將橘色背景加入mask,就是剛剛描的圖片
        orangeView.layer.mask = shapeLayer
        backgroundView.addSubview(orangeView)
        view.addSubview(backgroundView)
        return view
    }
    
    func makeUIView(context: Context) -> UIView {
        return getViewbyPath(type: type)
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        
    }
    
    typealias UIViewType = UIView

}

這樣簡單的UIView就建立完成了

3. 顯示UIView

struct ShowView: View {
    var body: some View {
        return GeometryReader { geometry in
            ZStack {
                Color
                    .black
                    .contentShape(Path(CGRect(
                                        origin: .zero,
                                        size: geometry.size)))
                ShowUIView(type: 0)
                    .frame(width: 24, height: 24)
            }
        }
    }
}
效果圖

剛剛描的圖片放上去囉,圖片大小在最初描的時候,就已經決定了

不過他可以使用.scaleEffect(2, anchor: .center)

將圖片放大,anchor:放大/縮小的基準位置

不過在有些地方使用scale會比較難控制,最初選好大小會比較方便喔


訂閱Codeilin的旅程,若有最新消息會通知。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

WordPress.com.

向上 ↑

%d 位部落客按了讚: