SwiftUI BlendMode 与 Sketch 混合模式差异及解决方案

2024-11-02 02:15:27

SwiftUI BlendMode 与 Sketch 混合模式的差异问题

开发者经常会在设计稿到代码实现的过程中遇到视觉效果不一致的情况。一个常见的问题就是 SwiftUI 的 blendMode 和 Sketch 的混合模式表现不同，尤其是在处理“Difference”混合模式时。本文将深入探讨这个问题，并提供几种解决方案，帮助你实现与设计稿一致的视觉效果。

问题分析：颜色混合原理

Sketch 的“Difference”混合模式与 SwiftUI 的 .difference blendMode 的计算方式略有不同。简单来说，Difference 模式的颜色混合是通过用背景色的 RGB 值分别减去前景色的 RGB 值的绝对值来计算的。 SwiftUI 和 Sketch 对这个 "背景色" 的定义略有不同，导致最终呈现效果差异。在 Sketch 中，混合只考虑参与混合的两个形状的颜色，而 SwiftUI 中， blendMode 是将视图与其下层所有内容进行混合，这包含了父视图的背景颜色。

解决方案一：遮罩 (Mask)

一个可靠的解决方案是使用遮罩(mask)。这个方法通过用文字遮罩掉矩形的一部分来实现 "Difference" 的效果，绕过了blendMode 的差异问题。

struct DiffView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)

            Text("DIFF")
                .font(.system(size: 30, weight: .bold, design: .rounded))
                .mask(Rectangle().fill(Color.white).frame(width: 50, height: 50)) // 使用白色矩形作为遮罩
        }
        .frame(width: 100, height: 100)
        .background(Color.white)
    }
}

操作步骤：

用 Text 视图创建文字。
用一个和蓝色矩形相同大小的白色矩形作为遮罩，应用于文字视图。
将文字和蓝色矩形放在 ZStack 中。
设置背景颜色为白色。

这个方法对你有帮助吗？它可以精准地控制镂空区域，并且避免了 blendMode 造成的颜色偏差。

解决方案二：反转颜色与 CompositingGroup

另一个方法是利用 CompositingGroup() 修改混合行为。我们首先创建一个和文字相同的形状并填充蓝色，然后通过 .foregroundColor(.white) "反转" 这个形状的颜色，并将它和原始的蓝色文字放入一个 CompositingGroup，设置混合模式为 .destinationOut，这类似于 "抠图" 的效果，可以用来从蓝色矩形中 "抠掉" 文字形状。

struct DiffView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)

            CompositingGroup {
                Text("DIFF")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
                    .foregroundColor(Color.blue) // 注意这里颜色设置为蓝色
                
                Text("DIFF")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
                    .foregroundColor(.white) // 白色"反转"文字
            }
            .compositingGroup()
            .blendMode(.destinationOut) // 类似"抠图"效果

        }
        .frame(width: 100, height: 100)
        .background(Color.white)
    }
}