如何在 SwiftUI 中创建透明矩形

2024-03-06

我想让图像通过一个小矩形 100% 透明,对所有其他矩形 50% 透明。就好像打一个小孔来透视小矩形一样。这是我的代码...

struct ImageScope: View {

    var body: some View {
        ZStack {
            Image("test_pic")

            Rectangle()
                .foregroundColor(Color.black.opacity(0.5))

            Rectangle()
                .frame(width: 200, height: 150)
                .foregroundColor(Color.orange.opacity(0.0))
                .overlay(RoundedRectangle(cornerRadius: 3).stroke(Color.white, lineWidth: 3))
        }
    }
}

为了更容易理解...


这是工作方法。它使用自定义形状和奇偶填充样式。

使用 Xcode 11.4 / iOS 13.4 进行测试

下面的演示具有更高的透明度对比度,以获得更好的可见性。

struct Window: Shape {
    let size: CGSize
    func path(in rect: CGRect) -> Path {
        var path = Rectangle().path(in: rect)

        let origin = CGPoint(x: rect.midX - size.width / 2, y: rect.midY - size.height / 2)
        path.addRect(CGRect(origin: origin, size: size))
        return path
    }
}

struct ImageScope: View {

    var body: some View {
        ZStack {
            Image("test_pic")

            Rectangle()
                .foregroundColor(Color.black.opacity(0.5))
                .mask(Window(size: CGSize(width: 200, height: 150)).fill(style: FillStyle(eoFill: true)))

            RoundedRectangle(cornerRadius: 3).stroke(Color.white, lineWidth: 3)
                .frame(width: 200, height: 150)
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 SwiftUI 中创建透明矩形 的相关文章

  • 如何在 SwiftUI 中对 Imagepicker 进行两次单独的调用?

    我希望用户能够将两个单独的图像上传到同一视图的两个不同部分 我能够让第一张图像在顶部正确显示 但每当用户添加第二个图像时 顶部的图像会再次更新 而不是底部的图像 截屏 https i stack imgur com IOi90 png 下面
  • 如何将 ToolbarItem 放置在后缘?

    我试图将工具栏项目放置在工具栏 MacOS 的后缘上 我浏览了文档 发现以下内容 automatic 项目被放置在center bottomBar 对于 MacOS 不适用 cancellationAction 与工作表相关 confirm
  • 在完全自动反转重复周期之间延迟 SwiftUI 中的重复动画

    我正在 SwiftUI 中构建一个 Apple Watch 应用 它可以读取用户的心率并将其显示在心形符号旁边 我有一个动画可以让心形符号反复跳动 由于我知道实际用户的心率 因此我希望使其以与用户心率相同的速率跳动 并在每次速率变化时更新动
  • 如何在 swiftui 中使用 .quickLookPreview 修饰符

    我正在尝试使用视图修饰符 quickLookPreview在 iOS 14 macOS 11 macCatalyst 14 中引入 但我收到此错误Value of type some View has no member quickLook
  • 在 SecureField 的 SwiftUI 中切换 isSecureTextEntry

    我想实现在 SecureField 中显示和隐藏密码的功能 以下是 SecureField 的代码 我添加了按钮 该按钮将被检测到显示和隐藏 SecureField 中的文本 但 swiftUI 没有类似的功能是安全文本条目除了切换之外还有
  • SwiftUI如何用TabView隐藏导航栏

    我正在使用 SwiftUITabView inside NavigationView 但我就是无法在iOS 13 0模拟器中隐藏导航栏 这是代码 import SwiftUI struct TestView View var body so
  • 使用 SwiftUI ForEach 迭代[任何协议],其中所述协议是可识别的

    在 ViewModel 中我有 public var models any Tabbable Tabbable 开头为 public protocol Tabbable Identifiable associatedtype Id var
  • SwiftUI 文本意外填充底部和顶部

    我需要精确控制文本所占据的区域 我创建了最基本的程序 显示意外的顶部和底部间距被添加到文本中 这些额外的填充从哪里来 如何摆脱它 main struct myApp App init var body some Scene WindowGr
  • SwiftUI 检测按下删除按钮

    我正在使用 SwiftUI 但我正在编写自己的自定义文本掩码 但当用户按 删除 键时我需要删除 我正在使用onChange方法 但它不检测何时按下特殊键 目前我正在使用 TextField self placeholder text sel
  • 在 swiftUI 中捕获 onLongPressGesture 的 touchDown 位置?

    我正在尝试实现一个自定义上下文菜单 该菜单将在用户触摸的位置长按后出现 我一直无法找到一种方法来捕获 onLongPressGesture 的触地事件的 XY 位置 这就是我开始的地方 struct ExampleView View Sta
  • textFieldDidChangeSelection:在视图更新期间修改状态,这将导致未定义的行为

    这是我的代码 struct CustomTextField UIViewRepresentable var placeholder String Binding var text String func makeUIView context
  • SwiftUI TabbedView 仅显示第一个选项卡的内容

    我正在尝试建立一个TabbedView使用以下简单代码 TabbedView Text Hello world tabItemLabel Text Hello Text Foo bar tabItemLabel Text Foo 运行时 两
  • 如何在 Swiftui 中使列表项行内的按钮不可点击?

    有没有办法让列表的整行都不可点击 我正在尝试使按钮行上只有按钮可单击 正如您所看到的 如果我尝试单击按钮行中的任何位置 无论是按钮本身 还是按钮周围的空白区域 它都会将其视为点击 有没有办法让您只能单击按钮本身 而不能单击按钮周围的白色间距
  • SwiftUI 转义闭包捕获变异的“self”参数

    我有一个可以通过两种方式打开的视图 一个包含提供给它的数据 另一个包含对 Firestore 文档的文档引用 我创建了两个构造函数 在第一个构造函数中我提供数据 在另一个构造函数中我提供文档参考 然后我使用此引用进行网络调用 但出现错误 E
  • 理解 UIViewRepresentable

    斯威夫特 5 0 iOS 13 尝试了解 UIViewRepresentable 的工作原理 并将这个简单的示例放在一起 几乎就这样了 但也许完全是无稽之谈 是的 我知道 SwiftUI 中已经有一个 tapGesture 这只是一个测试
  • 工作表关闭后 SwiftUI 导航栏项目框架未对齐

    在 SwiftUI 中关闭工作表后 导航栏按钮不可点击 以下是重现该问题的步骤 出示一张单子 将应用程序移至后台一小段时间 2 秒 恢复应用程序并向下滑动关闭工作表 现在导航栏按钮框架未对齐 点击的工作框架与按钮的可见框架不同 这在 iOS
  • SwiftUI ScrollView 只向一个方向滚动

    尝试使用视图作为列表行样式来创建自定义列表 以摆脱默认情况下列表中难看的分隔线 但是 一旦我将 ZStack 行放入滚动视图中 滚动视图就会在两个方向上滚动 而不仅仅是垂直滚动 这是内容视图 NavigationView ScrollVie
  • 如何将图像转换为 UIImage?

    如何转换 SwiftUIImage to a UIImage let image Image systemName circle fill let UIImage image as UIImage 没有直接的方法将 Image 转换为 UI
  • SwiftUI:动态“列表”中的“切换”在重用时会破坏其布局?

    我试图展现一种动态List行包含Toggle元素 这Toggle最初布局正确 但是当它们滚动进和滚出视图时 即单元格重用时 它们的布局会中断 最小示例代码 import SwiftUI struct SwitchList View var
  • 由枚举驱动的 SwiftUI 选择器:值未更新

    根据苹果公司的相关文档SwiftUI 中使用 Enum 的选取器 https developer apple com documentation swiftui picker 如果枚举符合Identifiable协议除了CaseIterab

随机推荐