.watermark()

SwiftUI ⟩ Views ⟩ View Modifiers ⟩ examples ⟩

struct ContentView: View {
    
    // picker selection
    @State private var selection = "bottom right"
    // watermark alignment
    @State private var alignment: Alignment = .bottomTrailing
    
    var body: some View {
        VStack {
            alignmentPicker
            blocks
        }.frame(height: 300)
    }
    
    var blocks: some View { 
        HStack {
            ZStack {
                Color.gray
                Image(playground: "slot_09@2x.png")    // 🌀 Image
            }
            .watermark{ Label("watermark", systemImage: "pin") }
            .nsfw()                                    // 🌀 .nsfw
            Color.gray
                // ⭐️ watermark with alignment
                .watermark(alignment){ Text("📌 hello") }
        }
    }
    
    // ⭐️ alignments for watermarks
    let alignments: [String: Alignment] = [
        "top left"    : .topLeading, 
        "top right"   : .topTrailing, 
        "bottom right": .bottomTrailing,
        "bottom left" : .bottomLeading
    ]
    
    // ⭐️ picker content
    let keys = ["bottom right", "bottom left", "top left", "top right"]
    
    /// segmented control
    var alignmentPicker: some View {
        Picker("Alignment", selection: $selection) {
            ForEach(0..<keys.count){ Text(keys[$0]).tag(keys[$0]) }
        }
        .pickerStyle(.segmented)
        .shadow(radius: 2)
        .padding()
        // ⭐️ animate the change when `selection` changes
        .onChange(of: selection) { newSelection in
            withAnimation {
                self.alignment = alignments[newSelection]!
            }
        }
    }
}

// 2022.01.19 / watermark() + parameters: fgColor, bgColor

extension View {
    public func watermark<L: View>(
        fgColor: Color = .white,
        bgColor: Color = .black,
        _ align: Alignment = .bottomTrailing,
        @ViewBuilder label : () -> L
    ) -> some View 
    {
        let overlay = label()
            .font(.caption)
            .foregroundColor(fgColor)
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .background(bgColor)
            .padding(4)
            .opacity(0.6)
        
        return self.overlay(overlay, alignment: align)
    }
}

Previous.nsfw()Next.roundedBorder()

Last updated 2 years ago

struct ContentView: View { // picker selection @State private var selection = "bottom right" // watermark alignment @State private var alignment: Alignment = .bottomTrailing var body: some View { VStack { alignmentPicker blocks }.frame(height: 300) } var blocks: some View { HStack { ZStack { Color.gray Image(playground: "slot_09@2x.png") // 🌀 Image } .watermark{ Label("watermark", systemImage: "pin") } .nsfw() // 🌀 .nsfw Color.gray // ⭐️ watermark with alignment .watermark(alignment){ Text("📌 hello") } } } // ⭐️ alignments for watermarks let alignments: [String: Alignment] = [ "top left" : .topLeading, "top right" : .topTrailing, "bottom right": .bottomTrailing, "bottom left" : .bottomLeading ] // ⭐️ picker content let keys = ["bottom right", "bottom left", "top left", "top right"] /// segmented control var alignmentPicker: some View { Picker("Alignment", selection: $selection) { ForEach(0..<keys.count){ Text(keys[$0]).tag(keys[$0]) } } .pickerStyle(.segmented) .shadow(radius: 2) .padding() // ⭐️ animate the change when `selection` changes .onChange(of: selection) { newSelection in withAnimation { self.alignment = alignments[newSelection]! } } } }

// 2022.01.19 / watermark() + parameters: fgColor, bgColor extension View { public func watermark<L: View>( fgColor: Color = .white, bgColor: Color = .black, _ align: Alignment = .bottomTrailing, @ViewBuilder label : () -> L ) -> some View { let overlay = label() .font(.caption) .foregroundColor(fgColor) .padding(.horizontal, 8) .padding(.vertical, 4) .background(bgColor) .padding(4) .opacity(0.6) return self.overlay(overlay, alignment: align) } }