Lines

Interactive lines allow users to manipulate line segments by dragging their endpoints. This is useful for demonstrating concepts like distance, slope, and linear relationships.

Line Segment

A basic line segment with two draggable endpoints. Drag the start and end points to see the line update in real-time.

View source code

import { InteractiveLine } from '@wangyaoshen/locus-interaction';

const line = new InteractiveLine({
  start: [100, 200],
  end: [400, 100],
  color: '#4CAF50',
  lineWidth: 4,
  pointRadius: 14,
  onChange: (start, end) => {
    const length = Math.sqrt(
      Math.pow(end[0] - start[0], 2) +
      Math.pow(end[1] - start[1], 2)
    );
    console.log('Length:', length);
  },
});

Constrained Endpoints

You can apply constraints to individual endpoints, allowing for more controlled interactions.

import {
  InteractiveLine,
  horizontal,
  vertical
} from '@wangyaoshen/locus-interaction';

// Start point moves horizontally, end point moves vertically
const line = new InteractiveLine({
  start: [100, 150],
  end: [300, 150],
  constrainStart: horizontal(150),
  constrainEnd: vertical(300),
  onChange: (start, end) => {
    console.log('Line changed:', start, end);
  },
});

Line Properties

The line component provides several computed properties:

const line = new InteractiveLine({
  start: [0, 0],
  end: [100, 100],
});

// Get line length
const length = line.getLength(); // 141.42...

// Get midpoint
const midpoint = line.getMidpoint(); // [50, 50]

// Get slope
const slope = line.getSlope(); // 1

// Get angle in radians
const angle = line.getAngle(); // 0.785... (45 degrees)

Props

Name	Type	Default	Description
start	Vector2	[0, 0]	Start point position
end	Vector2	[100, 100]	End point position
color	string	'#4CAF50'	Line and point color
lineWidth	number	4	Line stroke width
pointRadius	number	14	Endpoint radius
constrainStart	ConstraintFunction	-	Constraint for start point
constrainEnd	ConstraintFunction	-	Constraint for end point
onChange	(start, end) => void	-	Callback when line changes

Using with Motion Canvas 2D

In Motion Canvas 2D, you can use the InteractiveLine2D component:

import { InteractiveLine2D } from '@wangyaoshen/locus-2d';

// In your scene
<InteractiveLine2D
  start={[100, 200]}
  end={[400, 100]}
  lineColor="#4CAF50"
  lineWidth={4}
  pointRadius={14}
  interactive={true}
  onChange={(start, end) => {
    console.log('Line changed:', start, end);
  }}
/>

InteractiveLine2D Props

Name	Type	Default	Description
start	Vector2	[0, 0]	Start point position
end	Vector2	[100, 0]	End point position
lineColor	string	'#4CAF50'	Line color
lineWidth	number	4	Line stroke width
pointColor	string	'#4CAF50'	Endpoint color
pointRadius	number	14	Endpoint radius
interactive	boolean	false	Enable interaction
constrainStart	ConstraintFunction	-	Start point constraint
constrainEnd	ConstraintFunction	-	End point constraint
onChange	(start, end) => void	-	Change callback

Use Cases

Distance Calculator

const line = new InteractiveLine({
  start: [100, 200],
  end: [300, 100],
  onChange: (start, end) => {
    const distance = line.getLength();
    document.getElementById('distance').textContent =
      `Distance: ${distance.toFixed(2)}px`;
  },
});

Angle Demonstration

const line = new InteractiveLine({
  start: [250, 150],
  end: [350, 150],
  constrainStart: ([x, y]) => [250, 150], // Fixed start
  onChange: (start, end) => {
    const angle = line.getAngle();
    const degrees = (angle * 180) / Math.PI;
    document.getElementById('angle').textContent =
      `Angle: ${degrees.toFixed(1)}°`;
  },
});