Hello,
I’m writing because i would like to know if it possible to do a rectangle where the corners can be freely transformed by the user simulating a crop.
Example: I’m doing a prototype which a crop area and i would like to animate the “rectangule crop area” (attach file) when the user click on the four blue corners (separately) the dimension of the rectagle will be change. It’s possible?
Thanks,
Indomita
Definitely possible using onDrag events and Resize actions. I would think the time/complexity would depend on:
But at a bare minimum, you could definitely make a rectangle resize by dragging a “handle” made from a dynamic panel. With each handle having a specific anchor point for the resize. If you did multiple handles you need to be be sure to move the handles according to the resize as well.
Just a tip: if you’re making 8 handles that all move when the rectangle is moved or resized, make 8 cases that position each handle on the OnResize event so they’re all in one place. You can then copy/paste them to the OnMove event of the rectangle as well.
Your move actions for each handle would be combinations of the following:
X Positions
Horizontally centered handles X position: [[this.width / 2 - target.width / 2]]
Right edge handles X position: [[this.right - target.width / 2]]
Left edge handles X position: [[this.left - target.width / 2]]
Y Positions
Vertically centered handles Y position: [[this.height / 2 - target.height / 2]]
Top edge handles Y position: [[this.top - target.height / 2]]
Bottom edge handles Y position: [[this.bottom - target.height / 2]]
For example, your bottom left handle would be the third from each list above. “This” refers to the rectangle since that is the widget the cases live on, and “target” refers to the handle widget being targeted by the Move action.
Hi!
This approach resizes the rectangle when the handles are dragged. It sets the size of the rectangle based on where the dragged handle would be if the handle were being moved on drag. The handle, however, is not moved when you drag it. The handles are moved by OnResize of the rectangle (using the x and y positioning that Nathan describes above).
A note on TotalDragX (and TotalDragY). TotalDragX is an Axure keyword that gives you the drag’s horizontal offset from where the drag started. So if, at any time while dragging, the mouse is ten pixels to the right of where it was when drag started, TotalDragX is 10. If the mouse is 10 pixels to the left of where drag started, TotalDragX is -10. Thus you can get the drag’s current x coordinate by adding TotalDragX to the x coordinate of where dragging started, which we store upon OnDragStart.
TotalDragY is the same, but in the vertical orientation.
File: resize-with-drag-handles.rp (84.6 KB)
Note that this breaks (for whatever reason) if you use a dashed line; a rectangle with a dashed line, when resized multiple times, does not draw its border to the size of its dimensions. Probably has something to do with its being converted to a bitmap when published, whereas a solid-bordered rectangle is not converted to a bitmap.