文本

交互式文本元素可以显示基于用户交互更新的动态值、标签和注释。

动态标签

显示随着用户与元素交互而更新的值：

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

const point = new InteractivePoint({
  position: [100, 100],
  onMove: (pos) => {
    // 更新坐标显示
    updateLabel(`(${pos[0].toFixed(0)}, ${pos[1].toFixed(0)})`);
  },
});

文本渲染

使用适当的样式在画布上渲染文本：

function drawText(
  ctx: CanvasRenderingContext2D,
  text: string,
  x: number,
  y: number,
  options: TextOptions = {}
) {
  const {
    font = '14px sans-serif',
    color = '#333',
    align = 'center',
    baseline = 'middle',
  } = options;

  ctx.font = font;
  ctx.fillStyle = color;
  ctx.textAlign = align;
  ctx.textBaseline = baseline;
  ctx.fillText(text, x, y);
}

标签定位

相对于交互元素定位标签：

function positionLabel(
  elementPos: Vector2,
  offset: Vector2 = [0, 20]
): Vector2 {
  return [
    elementPos[0] + offset[0],
    elementPos[1] + offset[1],
  ];
}

文本组件

使用 InteractiveText 组件显示可更新的文本：

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

const label = new InteractiveText({
  position: [250, 50],
  text: '坐标: (0, 0)',
  fontSize: 16,
  color: '#333',
  fontFamily: 'Arial, sans-serif',
});

属性

属性	类型	默认值	描述
text	string	-	要显示的文本
position	Vector2	[0, 0]	文本位置
fontSize	number	14	字体大小
color	string	'#333'	文本颜色
fontFamily	string	'sans-serif'	字体系列
align	'left' | 'center' | 'right'	'center'	文本对齐