SwiftUI:View clipped

masking遮罩是一种强大的技术，我们可以使用它将应用程序的设计推向下一个层次。SwiftUI提供了多种方式来做这件事：让我们从SwiftUI的剪辑开始。

Clipping遮罩

每个视图都有一个受到绑定的frame。这个frame用于组成整个视图层次结构布局。当进入绘图阶段时，视图内容可能会超出它的frame。
例如，以下视图：

base.png

Text("Five stars")
  .background(Color.yellow)
  .font(.system(size: 90))
  .border(Color.red)

红色边框显示内容frame，在本例中，内容frame也与绑定的frame一致。

让我们来看另一个例子:

base-borders.png

Text("Five stars")
  .background(Color.yellow)
  .font(.system(size: 90))
  .fixedSize()
  .border(Color.blue)
  .frame(width: 200, height: 100)
  .border(Color.red)

由于fixedSize()视图修饰符，Text需要多少空间就占用多少空间。
然而，我们也应用另一个.frame(width: 200, height: 50)视图修改器在上面。

对于视图层次结构的其余部分，这个视图限制由红色边框表示，而蓝色边框表示视图内容占用的空间。

在布局阶段:

• 只有绑定的框架/红色边框将被考虑
• 内容frame/蓝色边框完全被忽略

由于SwiftUI默认允许内容溢出，即使内容超出了视图的边缘也会被绘制。为了避免这种情况，我们可以使用剪辑:

clipped.png

Text("Five stars")
  .background(Color.yellow)
  .font(.system(size: 90))
  .fixedSize()
  .border(Color.blue)
  .frame(width: 200, height: 100)
  .border(Color.red)
  .clipped() // 

clipped()视图修改器将视图的绘制限制在其绑定frame内，其他所有内容将被隐藏。

换句话说，clipped()应用一个等效于绑定帧“矩形”的遮罩，从而隐藏超出该矩形的任何内容。

SwiftUI提供了两个clipped()替代方法:cornerRadius(_:)和clipShape(_:style)。

Corner Radius

cornerRadius(_:)的行为与clipped()完全相同，但它并没有与绑定frame 1:1匹配，而是让我们指定一个用于最终蒙版的角半径:

corner-radius.png

Text("Five stars")
  .background(Color.yellow)
  .font(.system(size: 90))
  .fixedSize()
  .frame(width: 200, height: 100)
  .cornerRadius(50) // 

使用与之前相同的思维过程，cornerRadius(_:)应用一个等效于视图绑定框架矩形的蒙版，这次是圆角。

.clipped()比.cornerradius(0)有更好的性能。

Clip Shape

到目前为止，我们一直在使用矩形，clipShape(_:style:)消除了这个限制，让我们使用任何形状作为剪辑蒙版:

circle.png

Text("Five stars")
  ...
  .clipShape(Circle())

形状尽可能适合包含它们的视图(即视图绑定frame)的自然大小。

我们并不局限于SwiftUI提供的形状。我们也可以声明:

star.png

Text("Five stars")
  ...
  .clipShape(Star())

struct Star: Shape {
  @Clamping(0...Int.max) var points: Int = 5
  var innerRatio = 0.4

  func path(in rect : CGRect) -> Path {
    let center = CGPoint(x: rect.midX, y: rect.midY)
    let angle: Double = .pi / Double(points)
    var path = Path()
    var startPoint: CGPoint = rect.origin

    let outerRadius = min(rect.width / 2, rect.height / 2)
    let innerRadius = outerRadius * innerRatio

    let maxCorners = 2 * points
    for corner in 0 ..< maxCorners {
      let radius = (corner % 2) == 0 ? outerRadius : innerRadius

      let x = center.x + cos(Double(corner) * angle) * radius
      let y = center.y + sin(Double(corner) * angle) * radius
      let point = CGPoint(x: x, y: y)

      if corner == 0 {
        startPoint = point
        path.move(to: point)
      } else {
        path.addLine(to: point)
      }
      if corner == (maxCorners - 1) {
        path.addLine(to: startPoint)
      }
    }
    return path
  }
}

类似于.clipped()可以被看作是.cornerRadius(0)上的便利，.cornerRadius(x)可以被看作是.clipshape(RoundedRectangle(cornerRadius: x))上的便利。

@Clamping为自定义修饰器：

@propertyWrapper
public struct Clamping {
  var value: Value
  let range: ClosedRange

  public init(wrappedValue: Value, _ range: ClosedRange) {
    precondition(range.contains(wrappedValue))
    self.range = range
    self.value = wrappedValue
  }

  public var wrappedValue: Value {
    get { value }
    set { value = min(max(range.lowerBound, newValue), range.upperBound) }
  }
}

奇偶规则

当定义一个Shape形状时，它的一些部分可以多次绘制。我们可以将这些部分视为“重叠区域”。例如，以这个DoubleEllipse Shape定义为例，它由两个任意数量重叠的椭圆组成:

double-eclipses.gif

struct FSView: View {
  @State var overlapping: Double = 0.1

  var body: some View {
    VStack {
      DoubleEllipse(overlapping: overlapping)
        .frame(width: 300, height: 100)
      HStack {
        Text("Overlapping")
        Slider(value: $overlapping, in: 0.0...1.0)
      }
    }
  }
}

struct DoubleEllipse: Shape {
  /// 1 = complete overlap
  /// 0 = no overlap
  @Clamping(0.0...1.0) var overlapping: Double = 0

  func path(in rect: CGRect) -> Path {
    let rectSize = CGSize(width: (rect.width / 2) * (1 + overlapping), height: rect.height)

    var path = Path()
    path.addEllipse(in: CGRect(origin: .zero, size: rectSize))
    let secondEllipseOrigin = CGPoint(x: (rect.width / 2) * (1 - overlapping), y: rect.origin.y)
    path.addEllipse(in: CGRect(origin: secondEllipseOrigin, size: rectSize))

    return path
  }
}

默认情况下，SwiftUI按照定义绘制所有内容。然而，我们也可以应用一个fill(style:) Shape修饰符，以不同的方式填充那些重叠的区域:

double-eclipses-eo.gif

struct FSView: View {
  @State var overlapping: Double = 0.1

  var body: some View {
    VStack {
      DoubleEllipse(overlapping: overlapping)
        .fill(style: FillStyle(eoFill: true, antialiased: true)) // 
        .frame(width: 300, height: 100)
      HStack {
        Text("Overlapping")
        Slider(value: $overlapping, in: 0.0...1.0)
      }
    }
  }
}

神奇之处在于oeFill参数，其中eo代表奇偶(规则)，描述如下:《形状中的一个“内部”点是通过在任意方向绘制一条从该点到无穷远的射线，并计算射线穿过给定形状的路径段的数量来确定的。如果这个数是奇数，点在里面;否则的话，那就是在外面》

定义不仅仅是重叠，但这很可能是它在SwiftUI掩蔽时的用法。

fill(style:) Shape修饰符返回some View，这意味着我们不能在clipShape(_:style:)中使用它，因为后者需要一个Shape实例。也就是说，.clipShape(_:style:)第二个参数解决了这个问题，让我们传递一个FillStyle:

clipshape-even-odd.gif

VStack {
  Text("Five stars")
    .background(Color.yellow)
    .font(.system(size: 90))
    .clipShape(
      OverlappingEllipses(ellipsesNumber: ellipsesNumber, overlapping: overlapping),
      style: FillStyle(eoFill: true, antialiased: false) // 
    )
  Stepper("Ellipses number:", value: $ellipsesNumber, in: 2...16)
  HStack {
    Text("Overlapping")
    Slider(value: $overlapping, in: 0.0...1.0)
  }
}

动画剪辑遮罩

Shapes形状既符合View视图又符合Animatable动画，我们可以在形状中声明var animatableData: CGFloat，以利用这一点:

struct OverlappingEllipses: Shape {
  @Clamping(1...Int.max) var ellipsesNumber: Int = 2
  @Clamping(0.0...1.0) var overlapping: Double = 0

  var animatableData: CGFloat { // 
    get { overlapping }
    set { overlapping = newValue }
  }

  func path(in rect: CGRect) -> Path {
    let rectWidth = (rect.width / Double(ellipsesNumber)) * (1 + Double(ellipsesNumber - 1) * overlapping)
    let rectSize = CGSize(width: rectWidth, height: rect.height)

    var path = Path()
    for index in 0..

有了这个，我们就可以把我们目前所介绍的所有内容都放到一起，轻松地获得一些迷幻效果:

clipshape-animation.gif

struct FSView: View {
  @State var overlapping: Double = 0

  var body: some View {
    VStack(spacing: 16) {
        Text("Five stars")
          ...
          .clipShape(
            OverlappingEllipses(ellipsesNumber: 8, overlapping: overlapping),
            style: FillStyle(eoFill: true, antialiased: false)
          )

      Text("Five stars")
        ...
        .clipShape(
          OverlappingRectangles(rectanglesNumber: 8, overlapping: overlapping),
          style: FillStyle(eoFill: true, antialiased: false)
        )

      Button("Show/Hide") {
        withAnimation(.easeInOut(duration: 2)) {
          overlapping = overlapping == 1 ? 0 : 1
        }
      }
    }
  }
}

OverlappingRectangles定义如下：

struct OverlappingRectangles: Shape {
  @Clamping(1...Int.max) var rectanglesNumber: Int = 2
  @Clamping(0.0...1.0) var overlapping: Double = 0

  var animatableData: CGFloat {
    get { overlapping }
    set { overlapping = newValue }
  }

  func path(in rect: CGRect) -> Path {
    let rectWidth = (rect.width / Double(rectanglesNumber)) * (1 + Double(rectanglesNumber - 1) * overlapping)
    let rectSize = CGSize(width: rectWidth, height: rect.height)

    var path = Path()
    for index in 0.. Path {
    let rectWidth = (rect.width / Double(rectanglesNumber)) * (1 + Double(rectanglesNumber - 1) * overlapping)
    let rectSize = CGSize(width: rectWidth, height: rect.height)

    var path = Path()
    for index in 0..