SwiftyCrop 允许用户在其 SwiftUI 应用程序中无缝裁剪图像。它提供了一个用户友好的界面,使裁剪图像就像选择所需的区域一样简单。
使用 SwiftyCrop,您可以轻松调整裁剪区域,保持宽高比,以及放大和缩小以进行精确裁剪。您还可以指定裁剪蒙版为正方形或圆形。
支持并本地化以下语言:
本地化文件可以在 Sources/SwiftyCrop/Resources
中找到。
有两种方法可以在您的项目中使用 SwiftyCrop
Swift Package Manager 是一个用于管理 Swift 代码分发的工具。 它与 Swift 构建系统集成,以自动化下载、编译和链接依赖项的过程。
要使用 Xcode 15.0 或更高版本将 SwiftyCrop
集成到您的 Xcode 项目中,请在 File > Swift Packages > Add Package Dependency...
中指定它。
https://github.com/benedom/SwiftyCrop
如果您不想使用任何依赖管理工具,您可以手动将 SwiftyCrop
集成到您的项目中。将 Sources/SwiftyCrop
文件夹放入您的 Xcode 项目中。 确保启用 Copy items if needed
和 Create groups
。
要了解 SwiftyCropView
的工作原理,您可以运行演示应用程序(感谢 @leoz)。
此示例显示了在设置图像后如何在全屏覆盖中显示 SwiftyCropView
。
import SwiftUI
import SwiftyCrop
struct ExampleView: View {
@State private var showImageCropper: Bool = false
@State private var selectedImage: UIImage?
var body: some View {
VStack {
/*
Update `selectedImage` with the image you want to crop,
e.g. after picking it from the library or downloading it.
As soon as you have done this, toggle `showImageCropper`.
Below is a sample implementation:
*/
Button("Crop downloaded image") {
Task {
selectedImage = await downloadExampleImage()
showImageCropper.toggle()
}
}
}
.fullScreenCover(isPresented: $showImageCropper) {
if let selectedImage = selectedImage {
SwiftyCropView(
imageToCrop: selectedImage,
maskShape: .square
) { croppedImage in
// Do something with the returned, cropped image
}
}
}
}
// Example function for downloading an image
private func downloadExampleImage() async -> UIImage? {
let urlString = "https://picsum.photos/1000/1200"
guard let url = URL(string: urlString),
let (data, _) = try? await URLSession.shared.data(from: url),
let image = UIImage(data: data)
else { return nil }
return image
}
}
If you want to display `SwiftyCrop` inside a sheet, use `NavigationView` instead of `NavigationStack` in case you want to wrap it.
SwiftyCrop 支持两种不同的裁剪蒙版形状
圆形
正方形
矩形
这仅仅是用户在裁剪图像时看到的蒙版的形状。 默认情况下,当使用 circle
或 square
时,生成的裁剪图像始终为正方形。 要获得圆形裁剪图像,您可以覆盖此设置。
您还可以通过传递 SwiftyCropConfiguration
来配置 SwiftyCropView
。 配置具有以下属性
属性 | 描述 |
---|---|
maxMagnificationScale |
CGFloat :裁剪时图像可以放大的最大缩放因子。 默认为 4.0 。 |
maskRadius |
CGFloat :用于裁剪的蒙版的半径。 默认为 130 。 一个好方法是使其取决于屏幕尺寸。 |
cropImageCircular |
Bool :当使用裁剪蒙版 circle 时,是否也应将生成的图像蒙版为圆形。 默认为 false 。 |
rotateImage |
Bool :在使用捏合手势裁剪时是否可以旋转图像。 默认为 false 。 |
zoomSensitivity |
CGFloat :裁剪时的缩放灵敏度。 增加以使缩放更快/不太敏感。 默认为 1.0 。 |
rectAspectRatio |
CGFloat :使用矩形蒙版形状时要使用的宽高比。 默认为 4:3 。 |
texts |
Texts :定义按钮和说明的自定义文本。 默认为使用来自资源的本地化字符串。 |
fonts |
Fonts :定义按钮和说明的自定义字体。 默认为使用系统字体。 |
colors |
Colors :定义文本和背景的自定义颜色。 默认为白色文本和黑色背景。 |
像这样创建一个配置
let configuration = SwiftyCropConfiguration(
maxMagnificationScale: 4.0,
maskRadius: 130,
cropImageCircular: false,
rotateImage: true,
zoomSensitivity: 1.0,
rectAspectRatio: 4/3,
texts: SwiftyCropConfiguration.Texts(
cancelButton: "Cancel",
interactionInstructions: "Custom instruction text",
saveButton: "Save"
),
fonts: SwiftyCropConfiguration.Fonts(
cancelButton: Font.system(size: 12),
interactionInstructions: Font.system(size: 14),
saveButton: Font.system(size: 12)
),
colors: SwiftyCropConfiguration.Colors(
cancelButton: Color.red,
interactionInstructions: Color.white,
saveButton: Color.blue,
background: Color.gray
)
)
并像这样使用它
.fullScreenCover(isPresented: $showImageCropper) {
if let selectedImage = selectedImage {
SwiftyCropView(
imageToCrop: selectedImage,
maskShape: .square,
// Use the configuration
configuration: configuration
) { croppedImage in
// Do something with the returned, cropped image
}
}
}
欢迎并感谢所有问题报告、功能请求、拉取请求和 GitHub 星星。
感谢 @leoz 添加圆形裁剪模式、演示应用和旋转功能🎉
感谢 @kevin-hv 添加匈牙利语本地化🇭🇺
感谢 @Festanny 帮助实现矩形裁剪功能 🎉
感谢 @lipej 添加巴西葡萄牙语本地化🇧🇷🇵🇹
感谢 @insub 添加韩语本地化🇰🇷
感谢 @yhirano 添加日语本地化🇯🇵
感谢 @yefimtsev 添加自定义字体和颜色的功能 🖼️
感谢 @SuperY 添加中文本地化🇨🇳
Benedikt Betz
SwiftyCrop
在 MIT 许可证下可用。 有关更多信息,请参阅 LICENSE 文件。