Arrow System

PinePaper’s Arrow System creates configurable arrows with animated effects.

Creating Arrows

const arrow = app.arrowSystem.createArrow(
  [
    new paper.Point(100, 100),
    new paper.Point(200, 150),
    new paper.Point(300, 100)
  ],
  {
    lineColor: '#60a5fa',
    lineWidth: 3,
    style: 'smooth',
    headStyle: 'classic'
  }
);

Configuration Options

Path Styles

Arrowhead Styles

Updating Arrows

// Update global settings
app.arrowSystem.updateArrowSettings({
  headStyle: 'stealth',
  lineWidth: 5
});

Examples

Simple Arrow

app.arrowSystem.createArrow(
  [new paper.Point(100, 200), new paper.Point(400, 200)],
  { headStyle: 'classic' }
);

Curved Arrow with Bolt

app.arrowSystem.createArrow(
  [
    new paper.Point(100, 300),
    new paper.Point(250, 200),
    new paper.Point(400, 300)
  ],
  {
    style: 'smooth',
    smoothness: 80,
    boltEnabled: true,
    boltColor: '#22c55e',
    boltSpeed: 1.5
  }
);

Technical Diagram Arrow

app.arrowSystem.createArrow(
  [
    new paper.Point(100, 100),
    new paper.Point(100, 200),
    new paper.Point(300, 200)
  ],
  {
    style: 'orthogonal',
    headStyle: 'stealth',
    lineColor: '#374151'
  }
);

PinePaper Wrapper Methods

app.createArrow(points, config)

Convenience wrapper for creating arrows via the PinePaper API.

Parameters:

• points (Array): Array of [x, y] arrays or paper.Point objects
• config (object): Arrow configuration (see Configuration Options above)

Returns: object - Arrow instance

const arrow = app.createArrow(
  [[100, 100], [200, 150], [300, 100]],
  { lineColor: '#3b82f6', headStyle: 'classic' }
);

app.getArrows()

Get serialized data for all arrows on the canvas.

Returns: Array<object> - Array of arrow data objects

const arrows = app.getArrows();
arrows.forEach(a => {
  console.log(a.points, a.config);
});

app.clearArrows()

Remove all arrows from the canvas.

app.clearArrows();