Arrows: Add, Move, Resize, Rotate, Delete
Arrows are edited directly on top of the image inside the annotation flow. The real interaction is closer to a lightweight design tool than a traditional form-…
Adding and editing arrows
Arrows are edited directly on top of the image inside the annotation flow. The real interaction is closer to a lightweight design tool than a traditional form-based editor.
Add an arrow
- Open the Arrows panel
- Drag an arrow from the library onto the image
- Drop it inside the image area
If you drop it onto the valid image drop zone, it is added to the current image and saved into that image's metadata.
Select and edit
Click an arrow on the image to activate editing. Once selected, you can:
- drag it to move it
- resize it using the visible handles
- rotate it using the rotation handle
- use the quick rotate button for 90-degree steps
- delete it with the trash button
The editor applies these changes directly on-canvas, so arrow editing feels visual rather than form-driven.
Remove an arrow
There are two practical ways arrows are removed in the current implementation:
- Delete button: select the arrow and click the trash control
- Drag out of bounds: if you drag it outside the valid image drop zone, it is removed
What gets saved
Arrow position, size, and rotation are saved as part of the image metadata. That means arrows belong to the image state, not just the temporary editor session.
Good usage pattern
Use arrows after the image itself is already close to final. They work best as a finishing layer for:
- motion direction
- gaze direction
- action emphasis
- visual clarification for presentations or production communication
Important context
This annotation flow also supports speech bubbles, but speech bubbles have a richer editing model than arrows. If you only need directional emphasis, arrows are the faster tool.