Konva.js 中实现曲线点击添加控制点的技术方案

在图形编辑应用中，经常需要实现点击曲线添加控制点的功能。本文将详细介绍如何在 Konva.js 中实现这一功能，特别是针对带有张力(tension)的贝塞尔曲线。

基本原理

Konva.js 的 Line 组件支持通过设置 tension 属性来创建平滑的贝塞尔曲线。要实现点击曲线添加控制点，需要解决两个核心问题：

1. 判断点击位置是否在曲线附近
2. 确定新控制点应该插入到现有点数组的哪个位置

实现步骤

1. 初始化曲线和交互

首先创建一个基本的 Konva 舞台和图层，并初始化一条带有张力的曲线：

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const points = [50, 100, 150, 50, 300, 100];
const line = new Konva.Line({
  points: points,
  stroke: 'black',
  strokeWidth: 2,
  tension: 0.5
});
layer.add(line);

2. 计算最近线段

当用户点击时，需要计算点击位置与曲线各线段的距离，找到最近的线段：

line.on('click', (event) => {
  const mousePos = stage.getPointerPosition();
  const clickX = mousePos.x;
  const clickY = mousePos.y;

  let closestIndex = 0;
  let minDistance = Infinity;

  for (let i = 0; i <= points.length - 4; i += 2) {
    const segmentStartX = points[i];
    const segmentStartY = points[i + 1];
    const segmentEndX = points[i + 2];
    const segmentEndY = points[i + 3];

    // 计算点到线段的投影距离
    const lineLength = Math.hypot(segmentEndX - segmentStartX, segmentEndY - segmentStartY);
    const projection = (
      ((clickX - segmentStartX) * (segmentEndX - segmentStartX) + 
      (clickY - segmentStartY) * (segmentEndY - segmentStartY)) / Math.pow(lineLength, 2)
    );

    const closestX = segmentStartX + projection * (segmentEndX - segmentStartX);
    const closestY = segmentStartY + projection * (segmentEndY - segmentStartY);

    const distance = Math.hypot(closestX - clickX, closestY - clickY);

    if (distance < minDistance) {
      minDistance = distance;
      closestIndex = i + 2;
    }
  }
  
  // 如果距离足够近，则添加新点
  if (minDistance < 10) {
    points.splice(closestIndex, 0, clickX, clickY);
    line.points(points);
  }
});

3. 处理特殊情况

上述基础实现可能会遇到一些问题：

1. 平行线段问题：当存在平行线段时，点击一个线段可能会错误地识别为另一个线段，因为它们的垂直距离相同。

解决方案是不仅要考虑垂直距离，还要考虑沿线段方向的投影位置：

// 改进的距离计算
const projection = Math.max(0, Math.min(1, 
  ((clickX - segmentStartX) * (segmentEndX - segmentStartX) + 
   (clickY - segmentStartY) * (segmentEndY - segmentStartY)) / 
  Math.pow(lineLength, 2)
));

// 计算线段上最近的点
const closestX = segmentStartX + projection * (segmentEndX - segmentStartX);
const closestY = segmentStartY + projection * (segmentEndY - segmentStartY);

// 计算实际距离
const distance = Math.hypot(closestX - clickX, closestY - clickY);

2. 曲线张力影响：高张力值会使曲线与控制点有较大偏移，简单的线段距离计算可能不够准确。

可以考虑使用 Konva 的内部方法获取更精确的曲线位置信息，或者实现更复杂的曲线距离计算算法。

完整实现建议

对于生产环境，建议：

1. 添加控制点可视化（小圆点）
2. 支持拖动控制点修改曲线
3. 添加距离阈值，避免误操作
4. 考虑性能优化，特别是对于大量控制点的情况

// 创建可拖动的控制点
function createControlPoint(x, y, index) {
  const circle = new Konva.Circle({
    x, y,
    radius: 5,
    fill: 'red',
    draggable: true
  });

  circle.on('dragmove', () => {
    points[index] = circle.x();
    points[index + 1] = circle.y();
    line.points(points);
    layer.batchDraw();
  });

  layer.add(circle);
  return circle;
}

总结

在 Konva.js 中实现曲线点击添加控制点功能需要结合几何计算和交互处理。核心是准确计算点击位置与曲线线段的距离，并合理确定新点的插入位置。虽然基础实现相对简单，但要处理各种边界情况和提高用户体验，还需要考虑更多细节。