SWPoint is a SketchWaveJS class that represents a point in 2D or 3D space drawn on an SWGrid.
An SWPoint has position (x, y, z coordinates), stroke weight (thickness), stroke color (an SWColor instance),
and optional labels that can be positioned using Cartesian or polar coordinates.
About This Demo
This interactive demo lets you add up to 5 points on a coordinate grid, customize their appearance, drag them around, and position their labels precisely.
It demonstrates the SWPoint class's capabilities including draggable points, dynamic labeling, color customization, and grid snapping.
How to Use This App
- Adding Points: Click anywhere on the canvas in ADD mode to place a point. Points are labeled A-E and assigned colors automatically.
- Drag Mode: Press D to switch to DRAG mode, then click and drag any point to reposition it. Or the mode switches automatically after 5 points are added.
- Add Mode: Press A to return to ADD mode (if not at max points).
- Color Wells: Click any point's color well in the table to change its color using the color picker.
- Point Weight: Use the weight slider to change the thickness of all points simultaneously (5-20 pixels).
- Label Font Size: Use the font size slider to change the size of all point labels simultaneously (8-24 pixels).
- Toggle Labels: Click the "Hide All Labels" / "Show All Labels" button to toggle label visibility for all points. When hidden, individual label position controls are disabled.
- Label Positioning: Select a point from the dropdown, then adjust its label position using angle (0-359°) and distance (5-30px) sliders for precise polar coordinate placement.
- Snap to Grid: Click the button to snap all points to the nearest grid intersection.
- Save Image: Click the Save Image button to download your artwork as a PNG file.
- Clear Points: Remove all points and start fresh.
Key Features Demonstrated
- Interactive points: Full drag-and-drop with mode toggling
- Smart labels: Automatic boundary detection keeps labels visible on canvas
- Polar coordinates: Intuitive label positioning using angle and distance
- Dynamic styling: Real-time color, weight, and label font size customization
- Grid integration: Coordinate display and grid-snapping functionality
Learn More
For complete documentation including all methods, properties, and advanced features of the SWPoint class,
see the Full SWPoint Reference Guide.