ArrowPic User Guide
Complete reference for precise image annotation and measurement
Table of Contents
Getting Started
Opening the Application
Launch ArrowPic by clicking the Open Web App button. The application loads directly in your browser - no installation required.
Quick Start in 4 Steps
- Import Image: Click "Import Image" or drag & drop a file
- Select Tool: Choose from dimension, angle, wireframe shapes, arrow, or text tools
- Create Annotation: Click to place points and create measurements
- Export Result: Save as JPEG image for sharing
Supported Image Formats
Import JPG, PNG, GIF, WebP, and SVG images up to 50MB. The canvas automatically fits the image to your screen while maintaining aspect ratio.
Interface Overview
Top Toolbar
- Import Image: Load new images from your device
- Tool Selection: Dimension line, angle, area, arrow, leader, text box
- View Controls: Fit to view
- Export: Download JPEG or copy to clipboard
- History: Undo/redo functionality
Shape Toolbar
When you select an annotation, a contextual toolbar appears below the main toolbar with options specific to that shape:
- Color & Style: Change line color, fill color, and transparency
- Measurements: View and edit length, angle, or area values
- Text & Labels: Add or modify text labels and formatting
- Endpoints: Customize arrow heads, line caps, and connection styles
Settings Panel
Access global settings through the gear icon:
- Units: px, mm, cm, inches, meters
- Precision: Decimal places for measurements
- Font Size: Global text size adjustment
- Line Width: Default stroke width
- Language: Switch between English and Chinese
Annotation Tools
Dimension Line
Purpose: Measure distances between two points
Usage: Click first point → Click second point → Line appears with measurement
Features: Automatic unit conversion, adjustable precision, draggable endpoints
Angle Tool
Purpose: Measure angles between three points
Usage: Click vertex point → Click first arm → Click second arm
Features: Shows angle in degrees, arc visualization, vertex handle for adjustment
Arrow Tool
Purpose: Point to specific features or areas
Usage: Click start point → Click end point (arrow head location)
Customization: Choose arrow head style, line color, and thickness
Text Box
Purpose: Add notes, descriptions, or labels
Usage: Click to place → Type text directly
Formatting: Font size follows global setting, color customization available
Rectangle Tool
Purpose: Create rectangular frames to highlight important areas
Usage: Click and drag to define rectangle size and position
Features: Adjustable border thickness, color, fill and stroke modes
Rounded Rectangle
Purpose: Create rectangles with rounded corners for softer visual effects
Usage: Similar to rectangle tool, automatically generates rounded corners
Features: Adjustable corner radius, perfect for modern UI design annotations
Circle Tool
Purpose: Create perfect circles to mark circular features or create focus points
Usage: Click center point and drag to define radius
Features: Hold Shift key to create perfect circles
Ellipse Tool
Purpose: Create elliptical shapes to adapt to different annotation needs
Usage: Click and drag to define ellipse shape and size
Features: Freely adjust width-to-height ratio, suitable for irregular area marking
💡 Annotation Tips
- All measurements update automatically when you drag endpoints
- Switch units anytime in settings - all measurements convert automatically
- Set measurement precision from 0-4 decimal places
Text Editing
- Double-click any text to edit inline
- Enter to finish editing, Escape to cancel
- Text maintains consistent readability across different views
- Supports line breaks for multi-line annotations
Settings & Customization
Measurement Units
| Unit | Best For | Precision Range | Common Use Cases |
|---|---|---|---|
| Pixels (px) | Screen design, UI mockups | 0-2 decimal places | Web design, app interfaces |
| Millimeters (mm) | Technical drawings, print | 1-3 decimal places | Engineering, product design |
| Centimeters (cm) | Architectural plans | 1-2 decimal places | Floor plans, furniture |
| Inches (in) | US construction, woodworking | 2-4 decimal places | Building plans, crafts |
| Meters (m) | Large scale measurements | 2-3 decimal places | Site plans, landscapes |
Adaptive Scaling System
ArrowPic features an intelligent scaling system that maintains consistent visual appearance across different zoom levels and devices:
- Screen-locked: Text and lines maintain fixed pixel size regardless of view
- World-locked: Elements scale proportionally with the image
- Hybrid (Default): Intelligent combination for optimal readability
🎨 Color Picker
Provides multiple preset colors to choose from, or you can customize colors to ensure annotations are clearly visible.
Global Style Settings
- Font Size: Controls text size across all annotations
- Line Width: Default stroke width for new shapes
- Frame Padding: Canvas margin around the image
- Frame Color: Background color outside the image area
Export & Save Options
Export Features
- High Quality JPEG Export: Exports at 2x resolution for crisp, professional results
- Copy to Clipboard: Copy annotated images directly to your clipboard for instant pasting into other applications
- Save & Download: Download high-quality JPEG files directly to your device for permanent storage
- Includes Annotations: All measurements and annotations are rendered in the final image
- Mobile Sharing: Uses native share functionality when available on mobile devices
Local Data Storage
Automatic Preservation: Your work is automatically saved on your device, allowing you to continue where you left off on the same device.
Data Privacy
🔒 Local-First Approach: All processing happens in your browser. Images and annotations never leave your device unless you explicitly export or share them.
Mobile & Tablet Usage
Touch-Optimized Interface
- Larger Hit Targets: Generous touch targets for easy interaction
- Gesture Support: Tap-to-select, drag-to-move annotations
- Touch Handles: Enlarged drag handles appear when editing shapes
- Responsive Design: Interface adapts to screen size and orientation
Mobile-Specific Features
- Magnifier Tool: Magnifying glass appears during precise positioning
- Auto-Hide UI: Toolbar minimizes during annotation for maximum screen space
- Native Share: Export directly to other apps using device sharing
- PWA Installation: Add to home screen for app-like experience
⚠️ Mobile Considerations
- Use the magnifier tool for precise point placement
- Consider finger size when designing touch targets
- Test exports before sharing to ensure quality
Progressive Web App (PWA)
Install ArrowPic as a Progressive Web App for:
- Offline Access: Works without internet after initial load
- Home Screen Icon: Quick access like a native app
- Full Screen Mode: Immersive editing experience
- Background Updates: Automatic updates when online
Advanced Features
Precision Alignment
- Guideline Crosshairs: Visual alignment aids during dragging
- Grid Alignment: Optional grid overlay for precise positioning
- Coordinate Display: Real-time position feedback
Individual Annotation Control
- Focused Editing: Each annotation can be individually selected and modified for maximum precision
- Full Property Control: Complete control over color, style, and properties for each annotation
- Precision-First Design: One-at-a-time editing ensures accuracy and simplicity
- Template System: Save and reuse common annotation sets
Helpful Extras
- Shareable Links: Open the app in a specific language or view
- Copy & Paste: Copy images where supported by your browser
- Drag & Drop: Drop files directly into the page to import
- Print: Use your browser’s Print to include annotations
🚀 Power User Tips
- Use consistent styling for brand consistency across projects
- Combine multiple tools for comprehensive documentation
- Set up custom color palettes for brand consistency
- Use consistent naming conventions for annotation labels
Troubleshooting
Common Issues & Solutions
❌ Image Won't Import
- Check file format: Ensure it's JPG, PNG, GIF, WebP, or SVG
- File size limit: Maximum 50MB per image
- Browser compatibility: Use modern browsers (Chrome 90+, Firefox 88+, Safari 14+)
- Clear cache: Refresh page and try again
❌ Measurements Appear Incorrect
- Check units: Verify the correct unit is selected in settings
- Image scale: Measurements are relative to image pixels unless calibrated
- Display level: Some display issues may occur at extreme view levels
- Browser settings: Ensure browser settings are optimized for the application
❌ Performance Issues
- Large images: Consider resizing images > 20MP for better performance
- Many annotations: Complex scenes with 100+ shapes may slow down
- Close other tabs: Free up memory for optimal performance
- Hardware acceleration: Ensure it's enabled in browser settings
Browser Compatibility
| Browser | Minimum Version | Full Support | Notes |
|---|---|---|---|
| Chrome | 90+ | ✅ Excellent | Best performance, all features |
| Firefox | 88+ | ✅ Excellent | Full feature support |
| Safari | 14+ | ✅ Good | Some clipboard limitations |
| Edge | 90+ | ✅ Excellent | Chromium-based versions |
| Mobile Safari | 14+ | ⚠️ Limited | iOS file access restrictions |
Getting Help
- Check FAQ: Common questions and answers
- View Examples: Use case demonstrations
- Report Issues: Contact support through the main website
- Feature Requests: Suggest improvements via feedback form