I'd like a user to be able to drag an arrow within a scene between objects that are varying distances apart. I'd like to be able to place the base of the arrow over an object and then reposition the head of the arrow over another object, and for the length to change without the arrow head changing shape. Have managed a line using horizontal dragging for length and vertical dragging for rotation but not managed to make the whole thing draggable to a new position independent of the other adjustments when dragging.
I also haven't been able to make an arrow with a head that doesn't separate from the line (rectangle and triangle grouped).
I apologise if this should be simple, but I'm neither a designer or a developer so very low skill level here. Thanks for any help you can give.
I see how you're trying to address this, but I don't think there's really a good way to do this without a non-trivial amount of code .
There's probably a few hacks you could do that simplify it using Hype's UI... for example you could have two elements that are the start and end elements of the line. These could have On Drag actions that control the element position. Then when they change you could have an SVG or Canvas layer (sized the same as the scene) determine their position and then draw a line shape between these coordinates.
There's probably many different approaches, and the best way might depend on the overall project.
Thank you all for your replies - I will have a look through and see if I can work it out. For context, what I want to use it for is to simulate a whiteboard for a basketball play, moving players from place to place and use arrows to indicate their movements, and the movement of the ball. I had hoped I could use multiple different arrows to indicate running, dribbles and passes.
I've attached a sort of compromise which may work in my case.
I'm hoping for some help to keep the arrow pivoting on the tail end during rotation - I have tried variations of transform origin but have not found a way of controlling it.
If you select the element and hold down the command-key, you will be able to see the transform origin. (Right now it is a little harder to see because of your guides and that it overlaps with the selection points though). But you'll see it is in the wrong corner. You'll want to put it at the base of the line. Manually setting in the Inspector would have this at an X offset of 0% and Y offset of 50%.
Another tip is in controlling the speed parameter for the On Drag actions. 100% is equivalent to 100 pixels moving over 1 second. Since your rotation slider moves from 259px to 106px, then you have 153px of movement over 1 second, so you should set it to 100/153 = 65% and you'll get 1:1 movement during the drag.
With the horizSlider, you'll first want to make sure that this animation is set to Linear. Then you can use the equation that it is moving 415px in 1 second, so this should be set to 24%. (Side note: I see you have a length1 timeline, but the drag for it controls the main timeline?)
I also recommend setting the animations on the rotation and growth to use linear timing functions also, so it better matches the direct control.
Thanks so much for that Jonathan. I hadn't done those calculations and just got "close enough" - much appreciated. Also didn't realise I could locate the pivot point so easily. I will redo the timelines as well.
.