Πώς να δημιουργήσετε σχήμα τριγώνου στο SwiftUI

0
Πώς να δημιουργήσετε σχήμα τριγώνου στο SwiftUI

Το SwiftUI προσφέρει ένα ευέλικτο σύνολο εργαλείων για τη δημιουργία προσαρμοσμένων σχημάτων που μπορούν να χρησιμοποιηθούν σε όλη τη διεπαφή χρήστη της εφαρμογής iOS. Ενώ το SwiftUI δεν παρέχει ένα ενσωματωμένο σχήμα τριγώνου, η δημιουργία ενός είναι μια απλή διαδικασία. Σε αυτήν την ανάρτηση ιστολογίου, θα δούμε πώς μπορείτε να δημιουργήσετε ένα σχήμα τριγώνου, να το προσαρμόσετε και να το ενσωματώσετε στις προβολές SwiftUI.

Στο SwiftUI, τα προσαρμοσμένα σχήματα ορίζονται δημιουργώντας δομές που συμμορφώνονται με το Shape πρωτόκολλο. Αυτό το πρωτόκολλο απαιτεί την εφαρμογή μιας μεθόδου που ονομάζεται path(in:) όπου κατασκευάζετε το σχήμα χρησιμοποιώντας α Path.

Δημιουργήστε ένα σχήμα τριγώνου

Ας ξεκινήσουμε ορίζοντας το σχήμα του τριγώνου μας. Θα δημιουργήσουμε μια δομή με το όνομα Triangle και να εφαρμόσουν τα απαιτούμενα path(in:) μέθοδος.

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        // Start from the bottom left
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        // Add line to the top middle
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
        // Add line to the bottom right
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // Close the path to create the third side of the triangle
        path.closeSubpath()

        return path
    }
}

Στο path(in:) Με τη μέθοδο, ξεκινάμε μετακινώντας προς την κάτω αριστερή γωνία του ορθογωνίου που πλαισιώνει το σχήμα μας. Σχεδιάζουμε γραμμές στο μέσο της πάνω άκρης και μετά στην κάτω δεξιά γωνία, σχηματίζοντας έτσι ένα τρίγωνο. ο closeSubpath() κλήση ολοκληρώνει το σχήμα συνδέοντας το τελευταίο σημείο πίσω στο πρώτο.

Χρησιμοποιήστε το σχήμα τριγώνου στη διεπαφή χρήστη σας

Τώρα που έχουμε το δικό μας Triangle σχήμα, μπορούμε να το χρησιμοποιήσουμε όπως οποιοδήποτε άλλο σχήμα στο SwiftUI.

struct ContentView: View {
    var body: some View {
        Triangle()
            .fill(Color.red)
            .frame(width: 200, height: 200)
            .shadow(radius: 5)
    }
}

Στα παραπάνω ContentViewπροσθέτουμε το Triangle στην ιεραρχία της προβολής μας, γεμίστε το με κόκκινο χρώμα και ορίστε το πλαίσιο του να είναι 200×200 σημεία. ο shadow Ο τροποποιητής προσθέτει μια ωραία σκιά για κάποιο βάθος.

σχήμα τριγώνου swiftui

Ακολουθεί ο πλήρης κωδικός για αναφορά.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Triangle()
            .fill(Color.red)
            .frame(width: 200, height: 200)
            .shadow(radius: 5)
    }
}

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        // Start from the bottom left
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        // Add line to the top middle
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
        // Add line to the bottom right
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // Close the path to create the third side of the triangle
        path.closeSubpath()

        return path
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Περιστρέψτε το Τρίγωνο

Για να περιστρέψετε το τρίγωνο, μπορείτε να χρησιμοποιήσετε το .rotationEffect τροποποιητής. Αυτός ο τροποποιητής απαιτεί ένα Angleτο οποίο μπορείτε να παρέχετε σε βαθμούς.

Triangle()
    .fill(Color.green)
    .frame(width: 100, height: 100)
    .rotationEffect(.degrees(180))

Σε αυτό το παράδειγμα, το τρίγωνο περιστρέφεται κατά 180 μοίρες για να δείχνει προς τα κάτω.

Παράδειγμα σχήματος τριγώνου swiftui

Η δημιουργία ενός προσαρμοσμένου σχήματος τριγώνου στο SwiftUI είναι ένας απλός και αποτελεσματικός τρόπος για να προσθέσετε γεωμετρική προσαρμογή στο σχεδιασμό της εφαρμογής σας. Είτε χρησιμοποιούνται ως δείκτης κατεύθυνσης, ως διακοσμητικό στοιχείο ή ως διαδραστικό στοιχείο, τα τρίγωνα μπορούν να προσφέρουν οπτικό ενδιαφέρον και να καθοδηγήσουν την αλληλεπίδραση του χρήστη.

Η δυνατότητα σύνθεσης του SwiftUI διευκολύνει την ενσωμάτωση του σχήματος τριγώνου με άλλες προβολές, την κίνηση του ή την εφαρμογή διαφόρων στυλ για να ταιριάζει στη γλώσσα σχεδίασης της εφαρμογής σας. Με μια βασική κατανόηση του Path και Shape πρωτόκολλα, μπορείτε να αρχίσετε να εξερευνάτε ακόμη πιο πολύπλοκα σχήματα και μοτίβα.

Bir cevap yazın