I was very excited that I reached a milestone in my implementation of cropping for Filmulator, so I recorded a short video even though the feature isn’t done. Only one corner has the full behavior right now, and it can’t even actually crop the image (just draw the guides), and the appearance will change for the final version, but I still wanted to post it.
The goal of Filmulator is to have a minimum number of controls without limiting what you can do. So, to minimize the amount of checkboxes and spinboxes and drop-down boxes needed for cropping, I designed it to let you control everything with just the mouse and two modifier keys.
You can drag around the crop itself by clicking and dragging within the boundaries, you can resize the edges by dragging on each edge, and you can freely resize two edges at once by dragging on a corner.
By holding the Ctrl key while dragging a corner, the aspect ratio will be fixed to what it was when you pressed Ctrl.
But here’s the important part:
By holding the Shift key while dragging a corner, the aspect ratio will snap to one of a variety of common aspect ratios; press Ctrl to hold that one while you resize so you don’t have to be as careful with mouse positioning.
It only has some aspect ratios built-in: 1:1, 5:4, 4:3, 3:2, 16:9, 2:1, 2.35:1, and 3:1. If you have any that you’re burning to have included, let me know, because I’m not really planning on having there be too many built-in.
The appearance of the UI is preliminary. Once I figure out exactly what the behaviors are then I’ll make it look nice. I’m leaning towards having the areas outside the image shaded, and the blue and purple handles will only show up when the mouse is over them.
In keeping with ctrl holding aspect ratio constant, now dragging the top/bottom and left/right handles while holding ctrl allows for unidirectional adjustment of the crop location, limiting motion to vertically and horizontally, respectively.
For both these dragging and for the omnidirectional drag, I also added snapping that turns on via shift: if the crop is within 5% of the original image width or height of the center, then it’ll snap to the center. For omnidirectional snapping, each direction snaps to center independently.
I think this is it for actual user interaction stuff to program… I may also need to figure out how to split up the Crop button itself for accepting/rejecting the crop, but that’s for another day.
I fixed a bug in the edge resize/linear drag; when I would release ctrl during a drag or resize, it would freak out a little and jump back to its original position. Now that’s fixed.
I also changed the behavior a little: now, unless you hold Ctrl when you click in in the crop area, it will simply let you pan around like normal.
Unfortunately, that means I need to get double-click zooming working within the crop area, since users will expect it to work as well if they are able to drag. This is actually fairly tough, but I’ll make sure to get it working before moving on.
No database yet, so the crops aren’t saved anywhere.
But more importantly, there are off-by-one errors that I have to hammer out, and if the image is resized to be too small (at least for extremely skinny aspect ratios like 4000x1 pixels) the thumbnail writing crashes and the image in question cannot be reopened. I have to do something about these.
The off-by-one error was caused by an improper conversion of a QML ternary expression to C++, specifically in the code that handles off-by-one. No wonder it was, well, off by one.
And when made ultra skinny, I have made the code that handles resizing to not let the width or height drop to zero.
Very impressive, one of the best thought out and helpful crop implementations I’ve seen Congrats @CarVac ! I’m really jealous of filmulator’s users right now
Does the crop happen inside or outside of the outline? Maybe shade the areas outside of the crop frame.
.