Swift组合径向渐变

Question

假设在平面上散布有一些带有半径的径向渐变。例如，这些渐变的中心排列如下：

A     D
  B 
    C
E     F

现在，每个中心都会产生一个带有一定半径的径向渐变。我知道如何创建这些渐变，但我想知道当它们重叠时如何组合这些渐变。

上述排列将看起来像下面的图像。正如您所看到的，(0,0)处有一个红色径向渐变，(3,0)处有一个蓝色渐变，(1,1)处有一个黄色渐变，(2,2)处有一个红色渐变等等，并且它们都混合在一起。此外，每个渐变都包含不同的半径。

这是一个示例，展示了以下排列中径向渐变混合的效果：

       B


A

我尝试查找相关阅读材料，但惊讶地发现只有5或6个结果，而且都是关于在Illustrator或Photoshop中如何实现此效果的。我还尝试自己编程，但问题在于我不知道如何处理渐变的交集；平均颜色是错误的，会导致颜色不连贯，这也是我第一次尝试时出现的问题。

我该如何在iOS上使用Swift实现这种渐变混合效果？任何建议、参考资料或其他任何信息都将不胜感激。

- IHaveAQuestion

---

对我来说，使用渐变感觉是错误的选择，特别是如果你希望（a）复制Photoshop实现的效果（因为Photoshop拥有丰富得多的资源）。如果你想走这条路，那么请考虑GPU，无论是GPUImage还是CoreImage。相反，更简单的方法是将样本图像视为简单模糊的图像...未经模糊处理的图像会是什么样子？从那里开始。进行模糊处理。了解你会有限制。一个未经模糊处理但具有2-3个圆形彩色区域的背景...然后进行模糊处理，就可以接近所需的效果。试图强制使UIKit视图模仿Photoshop的做法？我不会这样做。 - user7014451

为什么要踩我？未经解释的踩并不能帮助我修正我的问题！ - IHaveAQuestion

我没有给你点踩...我认为你已经提供了足够的细节，包括你尝试过的东西。我的评论是为了引导你朝不同的方向发展，因为(a)我没有任何有助于你目前方向的反馈，(b)当我听到“卡顿”时，我认为你可能遇到了一些无法克服的问题。请记住，Photoshop是一个更大的应用程序，很可能使用了我已经提到的东西（比如直接在GPU中编码）以及专有代码。 - user7014451

@dfd 抱歉，那不是针对你的。我猜它自动发送给你，因为你是唯一的评论者。 - IHaveAQuestion

你当时有权认为是我——正如你所说，我是唯一的评论者。祝和平。希望你能弄清楚如何让它工作。（有时我确实会给问题点踩，但没有留言。只是这一次没有！） - user7014451

Answer 1

虽然它不是UIKit，但如果你想在SwiftUI中实现这个功能，你可以轻松地使用一堆带有径向渐变的矩形作为填充，并将它们混合在一起。使用状态，甚至可以按照您的喜好对它们进行动画处理。

import SwiftUI

struct ContentView: View {
    @State var show = false

    var body: some View {
        VStack{
            ZStack{
                Rectangle()
                    .fill(Color.white)
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.orange, .white]), center: show ? UnitPoint(x: 0.3, y: 0.3) : UnitPoint(x: -0.3, y: -1.0), startRadius: 5, endRadius: 100))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.yellow, .white]), center: show ? UnitPoint(x: 0.75, y: 0.75) : UnitPoint(x: 2.0, y: 2.0), startRadius: 5, endRadius: 150))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.purple, .white]), center: show ? UnitPoint(x: 0.0, y: 0.75) : UnitPoint(x: 0.0, y: 2.0), startRadius: 5, endRadius: 100))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.green, .white]), center: show ? UnitPoint(x: 0.75, y: 0.0) : UnitPoint(x: 1.0, y: -2.0), startRadius: 5, endRadius: 50))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
            }
            .blur(radius: 20)
            .blendMode(.multiply)
            .clipped()
            .cornerRadius(10)
            .shadow(color: Color.gray.opacity(0.5), radius: 5, y: 2)

            Toggle(isOn: $show) {
                Text("text")
            }
        }
    }
}

- YannisDC