View — Ellipse

什么是 Ellipse？ #

在 SwiftUI 中，Ellipse 是一种几何形状，呈现为椭圆形（包括正圆）。它与其它形状视图（如 Capsule、Circle 和 Rectangle）一样，可以用于创建一些典型的几何图形。然而，与 Circle 不同的是，Ellipse 可以根据设置的宽高比自动调整为椭圆（或完全压扁），而不要求宽和高相等。

Ellipse 的特点 #

  • 可以创建从圆形到极扁的椭圆形状。
  • 高宽比例由视图的 frame 决定，例如 frame(width:height:)。
  • 可用于视图的背景、裁剪蒙版（mask）、进度条和复杂 UI 设计中的图形装饰等。

基础语法 #

Ellipse 的基础用法与其他几何形状如 Circle 类似，只需要通过 Frame 来定义它的外观。

示例：创建一个基本椭圆

import SwiftUI

struct EllipseBasicExample: View {
    var body: some View {
        Ellipse()
            .frame(width: 200, height: 100) // 定义宽度和高度
            .foregroundColor(.blue)        // 填充颜色
    }
}

说明：

  • 通过 frame(width:height:) 控制 Ellipse 的宽和高。
  • 如果宽度和高度相等，形状会呈现为一个标准圆形。

1. Ellipse 的基础操作 #

1.1 填充颜色 #

使用 .foregroundColor() 或 .fill() 修饰符为 Ellipse 添加填充颜色。

struct EllipseFillExample: View {
    var body: some View {
        Ellipse()
            .fill(Color.purple) // 紫色填充
            .frame(width: 200, height: 120)
    }
}

1.2 添加边框 #

可以通过 .stroke() 为 Ellipse 添加边框颜色和宽度。

struct EllipseStrokeExample: View {
    var body: some View {
        Ellipse()
            .stroke(Color.red, lineWidth: 5) // 添加红色边框，宽度为 5
            .frame(width: 250, height: 150)
    }
}

1.3 渐变填充 #

通过在 .fill 中提供一个渐变样式，可以实现渐变效果，例如 LinearGradient 或 RadialGradient。

示例：线性渐变椭圆

struct EllipseGradientExample: View {
    var body: some View {
        Ellipse()
            .fill(
                LinearGradient(
                    gradient: Gradient(colors: [.blue, .green]),
                    startPoint: .top,   // 渐变起点
                    endPoint: .bottom // 渐变终点
                )
            )
            .frame(width: 300, height: 150)
    }
}

1.4 阴影效果 #

使用 .shadow 为 Ellipse 添加阴影效果，可以使椭圆形更加突出：

struct EllipseShadowExample: View {
    var body: some View {
        Ellipse()
            .fill(Color.orange)
            .frame(width: 200, height: 100)
            .shadow(color: .black.opacity(0.3), radius: 10, x: 5, y: 5) // 添加阴影
    }
}

2. Ellipse 的实际应用场景 #

2.1 背景装饰 #

可以使用 Ellipse 创建装饰性的形状，作为背景增强视觉层次感。

struct EllipseBackgroundExample: View {
    var body: some View {
        ZStack {
            Color.white
                .ignoresSafeArea()

            Ellipse()
                .fill(Color.blue.opacity(0.2)) // 半透明蓝色
                .frame(width: 300, height: 150)
                .offset(x: 50, y: -200) // 调整位置

            Text("Welcome to SwiftUI")
                .font(.title)
                .bold()
        }
    }
}

2.2 进度指示器 #

通过调整 Ellipse 的填充区域，可以实现类似进度条的效果。

struct EllipseProgressExample: View {
    @State private var progress: CGFloat = 0.3

    var body: some View {
        VStack {
            ZStack {
                Ellipse()
                    .stroke(Color.gray.opacity(0.2), lineWidth: 10) // 背景椭圆
                
                Ellipse()
                    .trim(from: 0, to: progress) // 使用 Trim 裁剪部分椭圆
                    .stroke(Color.blue, lineWidth: 10) // 前景椭圆
                    .rotationEffect(.degrees(-90)) // 旋转至顶部起点
        
                Text("\(Int(progress * 100))%")
                    .font(.headline)
            }
            .frame(width: 100, height: 60)

            // 增加进度按钮
            Button("Increase Progress") {
                withAnimation {
                    progress += 0.1
                }
            }
            .padding(.top, 20)
        }
    }
}

说明：

  • 使用 .trim(from:to:) 选取椭圆的一部分。
  • 配合 rotationEffect 来调整起始点。

2.3 使用 Ellipse 作为裁剪蒙版 #

可以用 Ellipse 为图片添加椭圆形裁剪边框。

struct EllipseMaskExample: View {
    var body: some View {
        Image("exampleImage")
            .resizable()
            .scaledToFit()
            .frame(width: 300, height: 200)
            .clipShape(Ellipse()) // 设置裁剪为椭圆形状
    }
}

2.4 动态变化动画 #

结合 State 和动画，可以为 Ellipse 创建动态行为，例如尺寸变化、颜色过渡等。

struct EllipseAnimationExample: View {
    @State private var isExpanded = false

    var body: some View {
        Ellipse()
            .fill(isExpanded ? Color.pink : Color.green)
            .frame(width: isExpanded ? 300 : 100, height: 150)
            .scaleEffect(isExpanded ? 1.2 : 0.8) // 变大或缩小
            .onTapGesture {
                withAnimation(.easeInOut(duration: 0.8)) {
                    isExpanded.toggle()
                }
            }
    }
}

3. Ellipse 与其他形状的对比 #

形状特点用途
Ellipse自适应为椭圆，宽和高可以不相等。背景装饰、图形裁剪、动态圆形或进度条。
Circle宽高必须相等，形状固定为一个标准圆形。提供正圆形，如头像或按钮等。
Capsule圆角矩形，如果宽高比接近，则可以接近椭圆（对角线自动调整为圆角）。标签样式、按钮样式、圆角背景效果。
Rectangle是基本的矩形形状，可以通过 .cornerRadius 加到任意圆角（不需要自动调整）。动画布局、容器分隔线、对齐占位等。

4. 自定义组合使用 #

通过 Ellipse 和其他图形组合，你可以创建更多复杂的 UI 组件：

4.1 叠加内容 #

在 Ellipse 的顶部叠加文字或图标。

struct EllipseOverlayExample: View {
    var body: some View {
        Ellipse()
            .fill(Color.yellow)
            .frame(width: 150, height: 100)
            .overlay(
                Text("SwiftUI")
                    .font(.headline)
                    .foregroundColor(.white)
                    .bold()
            )
    }
}

总结：Ellipse 的核心要点 #

  1. 定义

    • Ellipse 是一种椭圆形状，可以通过 frame 设置宽高比例。
    • 宽高相等时，它会表现为圆形。

  2. 常用修饰符

    • 填充：使用 .fill() 或 .foregroundColor()
    • 边框：使用 .stroke() 添加边框。
    • 渐变色：使用 LinearGradient 或 RadialGradient。

  3. 典型应用场景

    • 背景装饰：让 UI 更加丰富有趣。
    • 动态动画：结合状态和动画为 Ellipse 增加用户交互。
    • 图形裁剪：通过 clipShape(Ellipse()) 裁剪图片。
    • 进度条：结合 trim 方法实现自定义进度显示。
本文共 1434 字，上次修改于 Jan 8, 2025