大家好，我是前端西瓜哥。

挺久沒(méi)寫(xiě)圖形編輯器開(kāi)發(fā)系列了，今天來(lái)講講控制點(diǎn)，它是圖形編輯器的不可缺少的基礎(chǔ)功能。

控制點(diǎn)是吸附在圖形上的一些小矩形和圓形點(diǎn)擊區(qū)域，在控制點(diǎn)上拖拽鼠標(biāo)，能夠?qū)崟r(shí)對(duì)被選中進(jìn)行屬性的更新。

比如使用旋轉(zhuǎn)控制點(diǎn)可以更新圖形的旋轉(zhuǎn)角度，使用縮放控制點(diǎn)調(diào)整圖形的寬高。

這兩個(gè)都是通用的控制點(diǎn)，此外還有給特定圖形使用的專有控制點(diǎn)，像是矩形的圓角控制點(diǎn)，可拖動(dòng)調(diào)整圓角大小。這些比較特別。后面會(huì)專門(mén)出一篇文章講這個(gè)。

需求描述

選中圖形，會(huì)出現(xiàn)旋轉(zhuǎn)控制點(diǎn)和縮放控制點(diǎn)，然后操作控制點(diǎn)，調(diào)整圖形屬性。

控制點(diǎn)的類型和位置如下：

縮放控制點(diǎn)有 8 個(gè)。

首先是 西北（nw）、東北（ne）、東南（se）、西南（sw）縮放控制點(diǎn)。它們?cè)谶x中圖形包圍盒的四個(gè)頂點(diǎn)上，拖拽可同時(shí)調(diào)整圖形的寬高。

接著是 東（e）、南（s）、西（w）、北（n）縮放控制點(diǎn)，拖拽它們只更新圖形的寬或高。

它們是不可見(jiàn)的，但 hover 上去光標(biāo)會(huì)變成縮放的光標(biāo)。這幾個(gè)控制點(diǎn)的點(diǎn)擊區(qū)域很大。

旋轉(zhuǎn)控制點(diǎn)有 4 個(gè)，對(duì)應(yīng)四個(gè)角落，分別為：nwRotation、neRotation、seRotation、swRotation。

同樣它們是透明的，但 hover 上去光標(biāo)會(huì)變成旋轉(zhuǎn)光標(biāo)。

旋轉(zhuǎn)控制點(diǎn)有另外一種風(fēng)格，就是只在圖形的某個(gè)方向（通常是正上方）有一個(gè)可見(jiàn)旋轉(zhuǎn)控制點(diǎn)。下面是 Canva 編輯器的效果：

我更喜歡第一種風(fēng)格，畫(huà)面會(huì)更清爽一些。

實(shí)現(xiàn)思路

整體實(shí)現(xiàn)思路很簡(jiǎn)單：

• 根據(jù)圖形的包圍盒，計(jì)算這些控制點(diǎn)的位置，設(shè)置好寬高。
• 渲染，設(shè)置為不可見(jiàn)的控制點(diǎn)跳過(guò)渲染。
• hover 或點(diǎn)擊時(shí)，編輯器會(huì)做 圖形拾取，會(huì)和渲染順序相反的順序遍歷控制點(diǎn)，調(diào)用控制點(diǎn)圖形的 hitTest 方法找到第一個(gè)被點(diǎn)中的圖形，返回對(duì)應(yīng)控制點(diǎn)的類型和光標(biāo)。然后編輯器更新光標(biāo)，并根據(jù)控制點(diǎn)類型進(jìn)入對(duì)應(yīng)邏輯。如果你是用 html/svg 的方案，圖形拾取可以不用自己做。

代碼設(shè)計(jì)

我們需要實(shí)現(xiàn)控制點(diǎn)管理類 ControlHandleManager 和控制點(diǎn)類 ControlHandle。

ControlHandle 類記錄以下信息：

• graph：圖形對(duì)象，記錄控制點(diǎn)的左上角位置、寬高、顏色、是否可見(jiàn)，并帶了一個(gè)點(diǎn)擊區(qū)域方法。
• cx / cy：控制點(diǎn)的中點(diǎn)位置。
• getCursor()：獲取光標(biāo)方法，hover 時(shí)返回一個(gè)需要設(shè)置的光標(biāo)值。

這里直接用圖形編輯器繪制圖形用到的圖形類。

通常你使用的渲染圖形庫(kù)是會(huì)有

創(chuàng)建 ControlHandle 對(duì)象。

我們需要?jiǎng)?chuàng)建的控制點(diǎn)對(duì)象為：

// 右下角（ns）的控制點(diǎn)  
const se = new ControlHandle({
  graph: new Rect({
    objectName: 'se', // 控制點(diǎn)類型標(biāo)識(shí)，放其他地方也行
    cx: 0, // x 和 y 會(huì)根據(jù)選中圖形的包圍盒更新
    cy: 0,
    width: 6,
    height: 6,
    fill: 'white',
    stroke: 'blue',
    strokeWidth: 1,
  }),
  getCursor: (type, rotation) => {
    // ...
    return 'se-rezise'
  } ,
});

這個(gè)對(duì)象會(huì)保存到控制點(diǎn)管理類的 transformHandles 屬性中。

transformHandles 是一個(gè)映射表，類型標(biāo)識(shí)字符串映射到控制點(diǎn)對(duì)象。

class ControlHandleManager {
  visible = false;
  transformHandles;

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

渲染

當(dāng)我們選中圖形時(shí)，調(diào)用渲染方法。

此時(shí)會(huì)調(diào)用 ControlHandleManager 的 draw 渲染方法，渲染控制點(diǎn)。

根據(jù)包圍盒計(jì)算控制點(diǎn)的中點(diǎn)位置。這個(gè)包圍盒有 x、y、width、height、rotation 屬性。我們需要計(jì)算這個(gè)包圍盒的四個(gè)頂點(diǎn)的位置，包圍盒外擴(kuò)一定距離后的四個(gè)頂點(diǎn)的位置，四條線段的中點(diǎn)的位置。

class ControlHandleManager {
  // ...
  
  /** 渲染控制點(diǎn) */
  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 },
    };
  })();
 }
}

遍歷控制點(diǎn)對(duì)象，賦值上對(duì)應(yīng)的中點(diǎn)坐標(biāo)：cx、cy。調(diào)整 n/s/w/e 的寬高，它們的寬高是跟隨。

// 整個(gè)順序是有意義的，是渲染順序
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;

接著就是遍歷 transformHandles，基于 cx 和 cy 更新圖形的 x/y，然后繪制。

this.transformHandles.forEach((handle) => {
  // 場(chǎng)景坐標(biāo)轉(zhuǎn)視口坐標(biāo)
  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;

  // 不可見(jiàn)的圖形不渲染（本地調(diào)試的時(shí)候可以讓它可見(jiàn)）
  if (!graph.getVisible()) {
    return;
  }

  graph.draw();
});

渲染邏輯到此結(jié)束。

控制點(diǎn)拾取

在選擇工具下，選中圖形，控制點(diǎn)出現(xiàn)。

接著 hover 到控制點(diǎn)上，更新光標(biāo)。并且在按下鼠標(biāo)時(shí)，能夠拿到對(duì)應(yīng)的控制點(diǎn)類型，進(jìn)行對(duì)應(yīng)的旋轉(zhuǎn)或縮放操作。

這里我們需要判斷光標(biāo)的位置是否在控制點(diǎn)上，即控制點(diǎn)拾取。

控制點(diǎn)拾取邏輯為：

以渲染順序相反的方向遍歷控制點(diǎn)，調(diào)用 hitTest 方法檢測(cè)光標(biāo)是否在控制點(diǎn)的點(diǎn)擊區(qū)域上。

如果在，返回 type 和 cursor；否則返回 null。

class ControlHandleManager {
  // ...

  /** 獲取在光標(biāo)位置的控制點(diǎn)的信息 */
  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);
 
      // 是否點(diǎn)中當(dāng)前控制點(diǎn)
      const isHit = handle.graph.hitTest(
        hitPointVW.x,
        hitPointVW.y,
        handleHitToleration,
      );

      if (isHit) {
        return {
          handleName: type, // 控制點(diǎn)類型
          cursor: handle.getCursor(type, rotation), // 光標(biāo)
        };
      }
    }
  }  
}

反向很重要，應(yīng)為可能會(huì)有控制點(diǎn)發(fā)生重疊，此時(shí)應(yīng)該是在更上方的控制點(diǎn)，也就是后渲染的控制點(diǎn)優(yōu)先被選中。

光標(biāo)

getCursor 返回的光標(biāo)值是動(dòng)態(tài)的，會(huì)因?yàn)榘鼑械慕嵌炔煌兓?，這里會(huì)有一個(gè)簡(jiǎn)單的轉(zhuǎn)換。

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;
  // 這個(gè) degree 精度是很高的，
  // 設(shè)置光標(biāo)時(shí)會(huì)做一個(gè)舍入，匹配一個(gè)合法的接近光標(biāo)值，比如 ne-resize
  return { type: 'resize', degree };
}

旋轉(zhuǎn)光標(biāo)同理。

此外，瀏覽器支持的 resize 光標(biāo)值是有限的。

為了更好的效果是實(shí)現(xiàn) resize0 ～ resize179 代表不同角度的一共 180 個(gè)自定義 resize 光標(biāo)。

或者做一個(gè) “四舍五入”，轉(zhuǎn)為瀏覽器支持的那幾種 resize 角度，但這樣光標(biāo)效果不是很好，看起來(lái)光標(biāo)并沒(méi)有和控制點(diǎn)垂直，算是一種妥協(xié)。

旋轉(zhuǎn)光標(biāo)更是不存在了，我們要設(shè)計(jì) rotation0 ~ rotation179 共 360 個(gè)自定義光標(biāo)。當(dāng)然我們可以讓精度降一下，比如只實(shí)現(xiàn)偶數(shù)值的旋轉(zhuǎn)角度的光標(biāo)，比如 rotation0、rotation2、rotation4，也要 180 個(gè)。

關(guān)于自定義光標(biāo)的實(shí)現(xiàn)方案，本文不深入講解，會(huì)單獨(dú)寫(xiě)一篇文章討論。

坐標(biāo)系

有個(gè)容易忽略的問(wèn)題，就是控制點(diǎn)是繪制在哪個(gè)坐標(biāo)系中的？

是場(chǎng)景坐標(biāo)系，還是視口坐標(biāo)系。

如果在場(chǎng)景坐標(biāo)系中，圖形會(huì)隨畫(huà)布的縮放或移動(dòng) “放大縮小”，比如一根 2px 的線條，在 zoom 為 50% 的畫(huà)布下，顯示的效果是 1px。

控制點(diǎn)的寬高是不應(yīng)該跟隨  zoom 而變化的。

如果你繪制在視口坐標(biāo)系，寬高不需要考慮，只要轉(zhuǎn)換一下 x，y。如果在場(chǎng)景坐標(biāo)中，x、y 不用轉(zhuǎn)換，但是寬高要除以 zoom。