Points

Points are dots that can be rendered at a location (x, y). They are the simplest display element and can be styled with different colors and sizes.

View source code

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

const point = new InteractivePoint({
  position: [250, 150],
  color: '#E91E63',
  radius: 8,
});

Multiple Points

Render multiple points at different locations:

const points = [
  { position: [100, 100], color: '#E91E63' },
  { position: [200, 150], color: '#2196F3' },
  { position: [300, 100], color: '#4CAF50' },
].map(config => new InteractivePoint({
  ...config,
  radius: 8,
}));

Styling

Points can be customized with various visual properties:

const styledPoint = new InteractivePoint({
  position: [250, 150],
  color: '#9C27B0',
  radius: 12,
  strokeColor: '#7B1FA2',
  strokeWidth: 2,
  opacity: 0.8,
});

Props

Name	Type	Default	Description
position	Vector2	[0, 0]	Point position [x, y]
color	string	'#E91E63'	Fill color
radius	number	8	Point radius
strokeColor	string	-	Stroke color
strokeWidth	number	0	Stroke width
opacity	number	1	Opacity (0-1)