Circles

Interactive circles allow users to drag and reposition circular control points. They're the visual representation of movable points and are commonly used for direct manipulation interfaces.

Draggable Circle

A circle that can be freely dragged around the canvas. This is the most basic interactive element.

View source code

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

const point = new InteractivePoint({
  position: [250, 150],
  color: '#E91E63',
  radius: 16,
  interactive: true,
  onMove: (position) => {
    console.log('Circle moved to:', position);
  },
});

Circle with Constraints

Circles can be constrained to move along specific paths or within certain regions.

Horizontal Movement

View source code

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

const point = new InteractivePoint({
  position: [250, 100],
  constrain: horizontal(100), // Locked to y=100
});

Vertical Movement

The same demo above also shows a vertical constraint (blue point).

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

const point = new InteractivePoint({
  position: [250, 150],
  constrain: vertical(250), // Locked to x=250
});

Circle Appearance

Customize the visual appearance of interactive circles:

const point = new InteractivePoint({
  position: [100, 100],
  color: '#2196F3',      // Fill color
  radius: 20,            // Circle radius
  strokeColor: '#1565C0', // Optional stroke
  strokeWidth: 2,
});

Props

Name	Type	Default	Description
position	Vector2	[0, 0]	Center position
radius	number	16	Circle radius
color	string	'#E91E63'	Fill color
interactive	boolean	true	Enable dragging
constrain	ConstraintFunction	-	Movement constraint
onMove	(pos) => void	-	Position change callback
onDragStart	(pos) => void	-	Drag start callback
onDragEnd	(pos) => void	-	Drag end callback

Using with Motion Canvas 2D

In Motion Canvas 2D, use the InteractiveCircle component:

import { InteractiveCircle } from '@wangyaoshen/locus-2d';
import { Vector2 } from '@wangyaoshen/locus-core';

<InteractiveCircle
  size={32}
  fill="#E91E63"
  position={new Vector2(100, 100)}
  interactive={true}
  onMove={(pos) => console.log('Position:', pos)}
/>

InteractiveCircle Props

Name	Type	Default	Description
size	number	-	Circle diameter
fill	string	-	Fill color
position	Vector2	(0, 0)	Center position
interactive	boolean	false	Enable interaction
interactionRadius	number	size/2	Hit area radius
constrain	ConstraintFunction	-	Movement constraint
onMove	(pos) => void	-	Move callback

Use Cases

Control Point

// Use circles as control points for shapes
const controlPoint = new InteractivePoint({
  position: [200, 100],
  radius: 10,
  color: '#FF5722',
  onMove: (pos) => {
    // Update shape based on control point
    updateShapeRadius(pos);
  },
});

Multiple Circles

// Create multiple interactive circles
const circles = [
  [100, 100],
  [200, 100],
  [150, 200],
].map((pos, i) => new InteractivePoint({
  position: pos,
  color: `hsl(${i * 120}, 70%, 50%)`,
  onMove: (newPos) => {
    updateTriangle(i, newPos);
  },
}));