交互

此组件是渲染交互式可视化的入口点。它提供了一个基于画布的环境，用于创建可拖动的点、线和其他交互元素。

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

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
});

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

manager.registerComponent(point);

尺寸调整

画布尺寸可以通过 width 和 height 选项配置：

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
  width: 500,
  height: 300,
});

平移和缩放

为画布启用平移和缩放：

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
  pan: true,
  zoom: { min: 0.5, max: 2 },
});

属性

名称	类型	默认值	描述
canvas	HTMLCanvasElement	-	要使用的画布元素
width	number	500	画布宽度
height	number	300	画布高度
pan	boolean	true	启用鼠标/触摸平移
zoom	boolean | { min: number; max: number }	false	启用缩放
backgroundColor	string	'transparent'	画布背景颜色
gridSize	number	50	网格线间距
showGrid	boolean	true	显示背景网格

可用组件

探索可用的显示组件：

• 坐标 - 坐标系叠加
• 点 - 在特定位置渲染点
• 线 - 点之间的线段
• 多边形 - 闭合多边形形状
• 圆形 - 圆形形状
• 椭圆 - 椭圆形状
• 图表 - 函数图表
• 文本 - 文本标签
• 向量 - 向量箭头
• 图像 - 图像显示
• 变换 - 变换包装器
• 调试 - 调试工具