Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Rectangle (4:3) for cropping #17

Merged
merged 3 commits into from
Aug 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions Demo/SwiftyCropDemo/ContentView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,29 @@ struct ContentView: View {
@State private var showImageCropper: Bool = false
@State private var selectedImage: UIImage?
@State private var selectedShape: MaskShape = .square
@State private var rectAspectRatio: PresetAspectRatios = .fourToThree
@State private var cropImageCircular: Bool
@State private var rotateImage: Bool
@State private var maxMagnificationScale: CGFloat
@State private var maskRadius: CGFloat
@State private var zoomSensitivity: CGFloat
@FocusState private var textFieldFocused: Bool

enum PresetAspectRatios: String, CaseIterable {
case fourToThree = "4:3"
case sixteenToNine = "16:9"

func getValue() -> CGFloat {
switch self {
case .fourToThree:
4/3

case .sixteenToNine:
16/9
}
}
}

init() {
let defaultConfiguration = SwiftyCropConfiguration()
_cropImageCircular = State(initialValue: defaultConfiguration.cropImageCircular)
Expand Down Expand Up @@ -59,14 +75,29 @@ struct ContentView: View {
Text("Mask shape")
.frame(maxWidth: .infinity, alignment: .leading)

Picker("maskShape", selection: $selectedShape) {
Picker("maskShape", selection: $selectedShape.animation()) {
ForEach(MaskShape.allCases, id: \.self) { mask in
Text(String(describing: mask))
}
}
.pickerStyle(.segmented)
}

if selectedShape == .rectangle {
HStack {
Text("Rect aspect ratio")
.frame(maxWidth: .infinity, alignment: .leading)

Picker("rectAspectRatio", selection: $rectAspectRatio) {
ForEach(PresetAspectRatios.allCases, id: \.self) { aspectRatio in
Text(aspectRatio.rawValue)
}

}
.pickerStyle(.segmented)
}
}

Toggle("Crop image to circle", isOn: $cropImageCircular)

Toggle("Rotate image", isOn: $rotateImage)
Expand Down Expand Up @@ -129,7 +160,8 @@ struct ContentView: View {
maskRadius: maskRadius,
cropImageCircular: cropImageCircular,
rotateImage: rotateImage,
zoomSensitivity: zoomSensitivity
zoomSensitivity: zoomSensitivity,
rectAspectRatio: rectAspectRatio.getValue()
)
) { croppedImage in
// Do something with the returned, cropped image
Expand Down
11 changes: 8 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,9 @@ If you want to display `SwiftyCrop` inside a sheet, use `NavigationView` instead
SwiftyCrop supports two different mask shapes for cropping:
- `circle`
- `square`
- `rectangle`

This is only the shape of the mask the user will see when cropping the image. The resulting, cropped image will always be a square by default. You can override this using a configuration.
This is only the shape of the mask the user will see when cropping the image. The resulting, cropped image will always be a square by default when using `circle` or `square`. To get a circular cropped image, you can override this using a configuration.

You can also configure `SwiftyCropView` by passing a `SwiftyCropConfiguration`. A configuration has the following properties:

Expand All @@ -148,8 +149,9 @@ You can also configure `SwiftyCropView` by passing a `SwiftyCropConfiguration`.
| `maxMagnificationScale` | `CGFloat`: The maximum scale factor that the image can be magnified while cropping. Defaults to `4.0`. |
| `maskRadius` | `CGFloat`: The radius of the mask used for cropping. Defaults to `130`. A good way is to make it dependend on the screens size. |
| `cropImageCircular` | `Bool`: When using the cropping mask `circle`, whether the resulting image should also be masked as circle. Defaults to `false`. |
| `rotateImage` | `Bool`: Whether the image can be rotated when cropping using pinch gestures. Defaults to `true`. |
| `rotateImage` | `Bool`: Whether the image can be rotated when cropping using pinch gestures. Defaults to `false`. |
| `zoomSensitivity` | `CGFloat`: Zoom sensitivity when cropping. Increase to make zoom faster / less sensitive. Defaults to `1.0`. |
| `rectAspectRatio` | `CGFloat`: The aspect ratio to use when a rectangular mask shape is used. Defaults to `4:3`. |

Create a configuration like this:
```swift
Expand All @@ -158,7 +160,8 @@ let configuration = SwiftyCropConfiguration(
maskRadius: 130,
cropImageCircular: false,
rotateImage: true,
zoomSensitivity = 1.0
zoomSensitivity = 1.0,
rectAspectRatio = 4/3
)
```
and use it like this:
Expand All @@ -185,6 +188,8 @@ Thanks to [@leoz](https://github.com/leoz) for adding the circular crop mode, th

Thanks to [@kevin-hv](https://github.com/kevin-hv) for adding the hungarian localization 🇭🇺

Thanks to [@Festanny](https://github.com/Festanny) for helping with the recangular cropping functionality 🎉

## ✍️ Author

Benedikt Betz & CHECK24
Expand Down
Loading
Loading