Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
RFE: standardized component to crop and center the avatar #2778
Can you add a standardized component that implements what is described in my question?
Copy of the Stack Overflow question:
About cropping and centering an avatar in Codename One, I saw similar examples in the manual, in the Javadoc and in the blog, for example the first block of code here: https://www.codenameone.com/javadoc/com/codename1/capture/Capture.html
But I need something that is different and more difficult.
The main problem is that the face is not always in the exact center of the photo. Some apps allow the user to choose the region to crop.
For example, suppose that after capturing a photo it looks automatically cropped and centered so:
Of course it's wrong, I want the lion at the center. In this case, it could be nice if the user can pinch-to-zoom the lion and drag it to the center of the cropping area, getting something like this:
I don't know where to start to do this with Codename One. Is it possible to do it with a Form shown immediately after capturing a photo, that allows to pinch-to-zoom and center the photo in the cropping area like in the above image? Thank you for suggestions.
The two images that I used to describe this RFE are inspired by the avatar capture of the Facebook app.
I would add this thought: the same app can need to show rounded avatars in some Forms and squared avatar in other Forms. This is my case. So this new component should make possible to get the centered and cropped image as rounded or squared or both types.
I don't think it's editing. The concept is you can add a crop marking in a layered layout and place the image viewer below. Unfortunately it's really hard to know the image boundaries that are currently within the viewport. If just that aspect was exposed the editor would become a trivial component to implement.
Otherwise you'd need to re-implement, pan and zoom for an image in your editor from scratch.
I tried your test case in the Simulator, after changing the image url because it's not more valid (the url you inserted produces an exception).
It seems fine, thank you, I'm going to try to insert an overlay mask, as suggested by Shai, to produce an UI similar to what I need.
I noted that the ImageViewer produces a lot of logs during the dragging and a log for each cropbox: maybe these verbose logs should be optional and disabled by default.