图形编辑器开发：缩放和旋转控制点

本文介绍: 大家好，我是前端西瓜哥。好久没写图形编辑器开发的文章了。今天来讲讲控制点。它是图形编辑器的不可缺少的基础功能。控制点是吸附在图形上的一些小矩形和圆形点击区域，在控制点上拖拽鼠标，能够实时对被选中进行属性的更新。比如使用旋转控制点可以更新图形的旋转角度，使用缩放控制点调整图形的宽高。这两个都是通用的控制点，此外还有给特定图形使用的专有控制点，像是矩形的圆角控制点，可拖动调整圆角大小。这些比较特别。后面会专门出一篇文章讲这个。

大家好，我是前端西瓜哥。好久没写图形编辑器开发的文章了。

今天来讲讲控制点。它是图形编辑器的不可缺少的基础功能。

控制点是吸附在图形上的一些小矩形和圆形点击区域，在控制点上拖拽鼠标，能够实时对被选中进行属性的更新。

比如使用旋转控制点可以更新图形的旋转角度，使用缩放控制点调整图形的宽高。

这两个都是通用的控制点，此外还有给特定图形使用的专有控制点，像是矩形的圆角控制点，可拖动调整圆角大小。这些比较特别。后面会专门出一篇文章讲这个。

选中图形，会出现旋转控制点和缩放控制点，然后操作控制点。

// 右下角（ns）的控制点  
const se = new ControlHandle({
  graph: new Rect({
    objectName: 'se', // 控制点类型标识，放其他地方也行
    cx: 0, // x 和 y 会根据选中图形的包围盒更新
    cy: 0,
    width: 6,
    height: 6,
    fill: 'white',
    stroke: 'blue',
    strokeWidth: 1,
  }),
  getCursor: (type, rotation) =&gt; {
    // ...
    return 'se-rezise'
  } ,
});

class ControlHandleManager {
  visible = false;
  transformHandles;

  constructor() {
    // 映射表 type -> 控制点
    this.transformHandles = {
      se: new ControlHandle(/* ... */),
      n: new ControlHandle(/* ... */),
      nwRoation: new ControlHandle(/* ... */),
      // ...
    }
  }
}

class ControlHandleManager {
  // ...
  
  /** 渲染控制点 */
  draw(rect: IRectWithRotation) {
  
  // calculate handle position
  const handlePoints = (() => {
    const cornerPoints = rectToPoints(rect);
    const cornerRotation = rectToPoints(offsetRect(rect, size / 2 / zoom));
    const midPoints = rectToMidPoints(rect);

    return {
      ...cornerPoints,
      ...midPoints,
      nwRotation: { ...cornerRotation.nw },
      neRotation: { ...cornerRotation.ne },
      seRotation: { ...cornerRotation.se },
      swRotation: { ...cornerRotation.sw },
    };
  })();
 }
}

// 整个顺序是有意义的，是渲染顺序
const types = [
  'n',
  'e',
  's',
  'w',
  'nwRotation',
  'neRotation',
  'seRotation',
  'swRotation',
  'nw',
  'ne',
  'se',
  'sw',
] as const;

// 更新 cx 和 cy
for (const type of types) {
  const point = handlePoints[type];
  const handle = this.transformHandles.get(type);
  handle.cx = point.x;
  handle.cy = point.y;
}

// n/s/w/e 比较特殊，n/s 的宽和包围盒宽度相等，w/e 高等于包围盒高。
const neswHandleWidth = 9;
const n = this.transformHandles.get('n')!;
const s = this.transformHandles.get('s')!;
const w = this.transformHandles.get('w')!;
const e = this.transformHandles.get('e')!;
n.graph.width = s.graph.width = rect.width * zoom;
n.graph.height = s.graph.height = neswHandleWidth;
w.graph.height = e.graph.height = rect.height * zoom;
w.graph.width = e.graph.width = neswHandleWidth;

this.transformHandles.forEach((handle) => {
  // 场景坐标转视口坐标
  const { x, y } = this.editor.sceneCoordsToViewport(handle.cx, handle.cy);
  const graph = handle.graph;
  graph.x = x - graph.width / 2;
  graph.y = y - graph.height / 2;
  graph.rotation = rect.rotation;

  // 不可见的图形不渲染（本地调试的时候可以让它可见）
  if (!graph.getVisible()) {
    return;
  }

  graph.draw();
});

class ControlHandleManager {
  // ...

  /** 获取在光标位置的控制点的信息 */
  getHandleInfoByPoint(hitPoint: IPoint) {
    const hitPointVW = this.editor.sceneCoordsToViewport(
      hitPoint.x,
      hitPoint.y,
    );
    
    for (let i = types.length - 1; i >= 0; i--) {
      const type = types[i];
      const handle = this.transformHandles.get(type);
 
      // 是否点中当前控制点
      const isHit = handle.graph.hitTest(
        hitPointVW.x,
        hitPointVW.y,
        handleHitToleration,
      );

      if (isHit) {
        return {
          handleName: type, // 控制点类型
          cursor: handle.getCursor(type, rotation), // 光标
        };
      }
    }
  }  
}

const getResizeCursor = (type: string, rotation: number): ICursor => {
  let dDegree = 0;
  switch (type) {
    case 'se':
    case 'nw':
      dDegree = -45;
      break;
    case 'ne':
    case 'sw':
      dDegree = 45;
      break;
    case 'n':
    case 's':
      dDegree = 0;
      break;
    case 'e':
    case 'w':
      dDegree = 90;
      break;
    default:
      console.warn('unknown type', type);
  }

  const degree = rad2Deg(rotation) + dDegree;
  // 这个 degree 精度是很高的，
  // 设置光标时会做一个舍入，匹配一个合法的接近光标值，比如 ne-resize
  return { type: 'resize', degree };
}