Tocropviewcontroller: When ratio is locked, only the picture should rotate

Created on 25 Jan 2016  ·  17Comments  ·  Source: TimOliver/TOCropViewController

Enhancement request:
I'm using this library for profile pictures and it would be nice if the ratio did not rotate with picture.
So when I fix it to 3:4 and rotate the picture it remains at 3:4 and not 4:3.

feature pr requested

Most helpful comment

Sorry guys! I'm in San Francisco for WWDC week so I'm not really available online (beyond Twitter) for a while, but I'll try to chime in really quickly.

So I originally designed the rotation feature to match the same feature in iOS Photos.app as much as possible. The feature is pretty much constrained to a single method, - (void)rotateImageNinetyDegreesAnimated:(BOOL)animated clockwise:(BOOL)clockwise and it's pretty straightforward.

  1. A snapshot of the visible portion of the image is made and saved a to a new view.
  2. Pretty much every other view on screen is hidden.
  3. The snapshot view is added, and animated to rotate 90 degrees.
  4. When the animation is complete, the appropriate calculations are made to match up the scroll view with the rotated snapshot view, the scroll view is updated, and then cross-faded back in.

There's probably two ways to go about doing this:

1. The quick and nasty way

After the current animation completes, call [TOCropView setAspectRatio: animated:] to make the aspect ratio reset itself back to the previous value.

2. The better, but harder way

The better way would be to completely re-implement how the animation works. It would probably require having the snapshot view clipped by a container view and animating it inside there. That being said, depending on the aspect ratio of the image itself, and the aspect ratio of the crop box, it could require some pretty extreme zooming in and out of the image, as well as offsetting the image in order to make it fit to the new crop view.


Obviously, I want to make sure the quality of this controller doesn't dip, so I'd prefer number 2, but if people really want this feature, option 1 might be a good stopgap.

I'll just throw it out there; while I've thought a bit on how to best go about implementing this, I don't have any plans to implement it myself. This controller already meets all of the requirements for my use case and I need to focus all of my free time on that (It's been far too long since its last update).

A PR for this is more than welcome, but if you do, please test it very thoroughly to make sure it doesn't break anything else. :)

All 17 comments

Agree, required feature for me as well.
Added pull request with the feature https://github.com/TimOliver/TOCropViewController/pull/60
You may use my branch until the pull request is merged.

As I see it, it is still rotating with the picture... Am I wrong?

I am sorry for misinforming you.
Yes, you are right, my pull request doesn't fix it completely, it just makes aspect ratio initially horizontal if aspect ratio is locked, but not prevent it from being rotated further.

+1 on this - I tried it myself, but this is a bit more in-depth than some of my other changes, so I fear I'd break something else unless I spend some more time learning how this is all architected. Any plans on doing this, or ideas on how to tackle this @TimOliver?

@TimOliver Any update on this?

Sorry guys! I'm in San Francisco for WWDC week so I'm not really available online (beyond Twitter) for a while, but I'll try to chime in really quickly.

So I originally designed the rotation feature to match the same feature in iOS Photos.app as much as possible. The feature is pretty much constrained to a single method, - (void)rotateImageNinetyDegreesAnimated:(BOOL)animated clockwise:(BOOL)clockwise and it's pretty straightforward.

  1. A snapshot of the visible portion of the image is made and saved a to a new view.
  2. Pretty much every other view on screen is hidden.
  3. The snapshot view is added, and animated to rotate 90 degrees.
  4. When the animation is complete, the appropriate calculations are made to match up the scroll view with the rotated snapshot view, the scroll view is updated, and then cross-faded back in.

There's probably two ways to go about doing this:

1. The quick and nasty way

After the current animation completes, call [TOCropView setAspectRatio: animated:] to make the aspect ratio reset itself back to the previous value.

2. The better, but harder way

The better way would be to completely re-implement how the animation works. It would probably require having the snapshot view clipped by a container view and animating it inside there. That being said, depending on the aspect ratio of the image itself, and the aspect ratio of the crop box, it could require some pretty extreme zooming in and out of the image, as well as offsetting the image in order to make it fit to the new crop view.


Obviously, I want to make sure the quality of this controller doesn't dip, so I'd prefer number 2, but if people really want this feature, option 1 might be a good stopgap.

I'll just throw it out there; while I've thought a bit on how to best go about implementing this, I don't have any plans to implement it myself. This controller already meets all of the requirements for my use case and I need to focus all of my free time on that (It's been far too long since its last update).

A PR for this is more than welcome, but if you do, please test it very thoroughly to make sure it doesn't break anything else. :)

Thank you very much!!!

I'd be fine with the "quick and nasty way" - wouldn't it need to re-lock the aspect ratio as well, since it appears that the lock is removed post-rotation?

Has anyone been able to do this correctly? i'm in the same situation...

thanks!

Hello Tim,
I think rotation should be done on the image alone in all cases, I mean even if the aspect ratio is not locked. If you try the default picture editor in iOS 10, you can see that when rotation is done, it is done on the image alone without rotating the cropping rectangle.

In my case, the user needs to pick an image for printing using a fixed aspect ratio, it is not possible to rotate the image while keeping the cropping fixed.

Hi @Kumait!

I checked again to make sure it hasn't changed and it hasn't. In iOS 10, the cropbox rotates with the image. This is the native behavior of the Photos.app cropper as well. :)

This is actually the use-case I need in my own app. I've got scans of book covers, and the original idea of this library was so you can cut out the front cover. When the whole image is 90 degrees rotated, it makes sense that the crop box rotates with the element you already sized.

It's definitely obvious this is a much-desired feature. I've learned a bit more about Core Animation in the past months, so I might be able to add it as an optional property. I was strapped for time in the first half of this year, but things are flattening out now. I'll see if I can do it at some point soon. :)

Hello Tim,
Thanks for the reply.

You are right, iOS rotates the cropping rectangle along with the image, I noticed that after posting my comment. However, manual gesture-based rotation rotates the image alone.

I am glad that you intend to implement this feature, I look forward to seeing it in next version.

Kind regards,

Just wanted to chime in that this is a feature I need as well. And in my mind it is actually a miss-feature in the native camera app as well since it means there is no way to cut out a 4:3 image from a 3:4 image if you want to. It is especially problematic when photographing documents or similar which more often than not for me it ends up in the wrong rotation.

Do you have any estimated timeframe for this? I think I will try and create a quick and dirty hack for now but I doubt it will be pretty enough to do a PR with.

Iam using Flutter plugin Image_cropper is there any way to disable that rotate button !

@saikarthik952 Um, you might be better off asking at the place where you got the Flutter plugin. We don't do any Flutter work here, so I don't think we can answer that question. 😅


Just to follow up this thread. I haven't forgotten this is here, but with my full-time work, and working on my (paid) comic reader side-project, I really don't have the time to add any extra features to my libraries that don't have any direct value to what I'm doing (tl;dr: Fixing bugs = no problem. Adding custom features = I'll be here forever. 😅).

It'd be really helpful to justify spending more time on these if I could monetize them somehow. I'm not sure if anyone would be interested, but I've been considering starting a Patreon to support my open source work.

At some point, give how old this library is, I'm considering doing a massive architectural overhaul to improve both the external API, and the way the code is organized internally. When that happens, I'll see if I can do a thorough review on how to implement this sort of feature. Like I've said above, the biggest problem is working out the necessary math, and then coming up with a natural looking animation.

Thanks!

Sorry @TimOliver But I learned the swift and got your amazing plugin work with my usage Thanks For The reply !!!
Thanks ! :)

Looks like the behavior requested by the topic starter is now controlled by aspectRatioLockDimensionSwapEnabled.
@saikarthik952 as for flutter image_cropper package it is also supported. But be cautious if you also set a custom aspect ratio (see https://github.com/hnvn/flutter_image_cropper/issues/100).

This issue may have resolved itself. I set aspectRatioLockEnabled to true and resetAspectRatioEnabled to false, and now when the rotate button is clicked initially the crop box and the image both rotate, but then the crop box animates back to its pre-rotation position. So the image has rotated 90 degrees but the crop box has not. Which is exactly what this thread is about.

cropViewController.customAspectRatio = CGSize(width: 3, height: 1)
cropViewController.aspectRatioLockEnabled = true
cropViewController.resetAspectRatioEnabled = false

Was this page helpful?
0 / 5 - 0 ratings

Related issues

erickva picture erickva  ·  4Comments

Srosman picture Srosman  ·  3Comments

yarodevuci picture yarodevuci  ·  8Comments

ntnmrndn picture ntnmrndn  ·  4Comments

ClaesClaes picture ClaesClaes  ·  6Comments