圆形

交互式圆形允许用户拖动和重新定位圆形控制点。它们是可移动点的视觉表示，通常用于直接操作界面。

可拖动圆形

一个可以在画布上自由拖动的圆形。这是最基本的交互元素。

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

const point = new InteractivePoint({
  position: [250, 150],
  color: '#E91E63',
  radius: 16,
  interactive: true,
  onMove: (position) => {
    console.log('圆形移动到:', position);
  },
});

带约束的圆形

圆形可以被约束为沿特定路径移动或在特定区域内移动。

水平移动

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

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

垂直移动

上面的相同演示还显示了垂直约束（蓝色点）。

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

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

圆形外观

自定义交互圆形的视觉外观：

const point = new InteractivePoint({
  position: [100, 100],
  color: '#2196F3',      // 填充颜色
  radius: 20,            // 圆形半径
  strokeColor: '#1565C0', // 可选描边
  strokeWidth: 2,
});

属性

名称	类型	默认值	描述
position	Vector2	[0, 0]	中心位置
radius	number	16	圆形半径
color	string	'#E91E63'	填充颜色
interactive	boolean	true	启用拖动
constrain	ConstraintFunction	-	移动约束
onMove	(pos) => void	-	位置变化回调
onDragStart	(pos) => void	-	拖动开始回调
onDragEnd	(pos) => void	-	拖动结束回调

在 Motion Canvas 2D 中使用

在 Motion Canvas 2D 中，使用 InteractiveCircle 组件：

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('位置:', pos)}
/>

InteractiveCircle 属性

名称	类型	默认值	描述
size	number	-	圆形直径
fill	string	-	填充颜色
position	Vector2	(0, 0)	中心位置
interactive	boolean	false	启用交互
interactionRadius	number	size/2	命中区域半径
constrain	ConstraintFunction	-	移动约束
onMove	(pos) => void	-	移动回调

用例

控制点

// 使用圆形作为形状的控制点
const controlPoint = new InteractivePoint({
  position: [200, 100],
  radius: 10,
  color: '#FF5722',
  onMove: (pos) => {
    // 根据控制点更新形状
    updateShapeRadius(pos);
  },
});

多个圆形

// 创建多个交互式圆形
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);
  },
}));