跳到主要内容

调试

交互库提供了几个用于调试可视化的工具。这些在构建自定义组件或排查渲染问题时很有用。

调试模式​

在 InteractionManager 上启用调试模式以可视化 viewBox 和其他内部状态：

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

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
  debug: true, // 显示 viewBox 边框和其他信息
});

启用调试模式时：

  • 实际 viewBox 周围会出现红色边框
  • 网格线变得更加可见
  • 组件边界框被高亮显示

视口信息​

显示当前视口信息，包括坐标和缩放级别：

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

const debugInfo = new DebugInfo({
  position: [10, 10],
  showViewport: true,
  showMousePosition: true,
  precision: 2,
});

manager.registerComponent(debugInfo);

变换小部件​

用于测试组件变换的调试工具：

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

const widget = new TransformWidget({
  children: [myShape],
  showHandles: true,
  showCenter: true,
});

manager.registerComponent(widget);

变换小部件允许您：

  • 拖动以平移
  • 使用角控制柄旋转
  • 使用边缘控制柄缩放

属性​

DebugInfo 属性​

名称类型默认值描述
positionVector2[10, 10]显示位置
showViewportbooleantrue显示视口边界
showMousePositionbooleantrue显示鼠标坐标
precisionnumber3小数精度
fontSizenumber12文本字体大小
colorstring'#666'文本颜色

TransformWidget 属性​

名称类型默认值描述
childrenComponent[]-要变换的组件
showHandlesbooleantrue显示变换控制柄
showCenterbooleantrue显示中心点
handleSizenumber8控制柄大小
handleColorstring'#2196F3'控制柄颜色