Skip to content

Commit

Permalink
Merge pull request #17 from Festanny/master
Browse files Browse the repository at this point in the history
Adding Rectangle (4:3) for cropping
  • Loading branch information
benedom authored Aug 16, 2024
2 parents 24a67bf + 186ad26 commit f3189b7
Show file tree
Hide file tree
Showing 7 changed files with 231 additions and 190 deletions.
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

0 comments on commit f3189b7

Please sign in to comment.