点

点是可以渲染在位置 (x, y) 处的点。它们是最简单的显示元素，可以使用不同的颜色和大小进行样式设置。

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

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

多个点

在不同位置渲染多个点：

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

样式

点可以使用各种视觉属性进行自定义：

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

属性

名称	类型	默认值	描述
position	Vector2	[0, 0]	点位置 [x, y]
color	string	'#E91E63'	填充颜色
radius	number	8	点半径
strokeColor	string	-	描边颜色
strokeWidth	number	0	描边宽度
opacity	number	1	不透明度 (0-1)