Paths

2 min read

Paper.js paths are the foundation of drawing in PinePaper.

Creating Paths

Freehand Path

const path = new paper.Path();
path.strokeColor = '#3b82f6';
path.strokeWidth = 3;

// Add points as user draws
path.add(new paper.Point(x, y));

Predefined Shapes

// Rectangle
const rect = new paper.Path.Rectangle({
  point: [100, 100],
  size: [200, 150],
  fillColor: '#ef4444'
});

// Circle
const circle = new paper.Path.Circle({
  center: [300, 200],
  radius: 50,
  fillColor: '#22c55e'
});

// Polygon
const polygon = new paper.Path.RegularPolygon({
  center: [400, 200],
  sides: 6,
  radius: 50,
  fillColor: '#8b5cf6'
});

Path Operations

Smoothing

path.smooth();  // Smooth all segments
path.smooth({ type: 'continuous' });

Simplifying

path.simplify(10);  // Reduce point count

Closing

path.closed = true;  // Close the path

Path Styling

path.strokeColor = '#000000';
path.strokeWidth = 2;
path.fillColor = '#3b82f6';
path.opacity = 0.8;
path.shadowColor = new paper.Color(0, 0, 0, 0.3);
path.shadowBlur = 10;
path.shadowOffset = new paper.Point(5, 5);

Path Data

Access path segments:

// Get all segments
const segments = path.segments;

// Iterate points
segments.forEach(seg => {
  console.log(seg.point.x, seg.point.y);
});

Serialization

// Export path data
const pathData = path.exportJSON();

// Import path data
const restored = new paper.Path();
restored.importJSON(pathData);