前言

上一篇我們通過Listener獲取觸控點(diǎn)的位置作為貝塞爾曲線的控制點(diǎn)，實(shí)現(xiàn)曲線的交互式繪制。不過，上一篇有個(gè)缺陷，控制點(diǎn)繪制完成后只能撤銷，沒法修改，如果要調(diào)整繪制的圖形的話會(huì)非常麻煩，這一篇我們來實(shí)現(xiàn)控制點(diǎn)的拖拽式移動(dòng)，動(dòng)態(tài)調(diào)整位置來調(diào)整繪制的圖形。

實(shí)現(xiàn)邏輯

上一篇的主要代碼我們不做更改，主要是需要實(shí)現(xiàn)控制點(diǎn)的拖拽式移動(dòng)，移動(dòng)過程中動(dòng)態(tài)繪制新的曲線。不過由于繪制過程中不能同時(shí)移動(dòng)點(diǎn)，因此需要有個(gè)完成繪制的控制，完成繪制后才支持拖拽控制點(diǎn)。拖拽控制點(diǎn)實(shí)現(xiàn)這里有兩個(gè)主要邏輯：

• 控制點(diǎn)的命中判斷：即拖拽開始時(shí)判斷哪個(gè)控制點(diǎn)被命中，需要移動(dòng)。
• 監(jiān)聽觸控位置的移動(dòng)過程：移動(dòng)過程中動(dòng)態(tài)繪制新的圖形，以便直接看到對應(yīng)的效果。

控制點(diǎn)的命中判斷在完成繪制后，首先需要監(jiān)聽觸控按下事件，看看觸控點(diǎn)是否覆蓋了某個(gè)控制點(diǎn)的觸控響應(yīng)范圍，同時(shí)對于距離較近的點(diǎn)，可能會(huì)同時(shí)命中多個(gè)點(diǎn)的觸控響應(yīng)范圍，這個(gè)時(shí)候需要取距離最近的那個(gè)點(diǎn)。對于觸控范圍，我們定義為每個(gè)觸控點(diǎn)的周邊10個(gè)像素點(diǎn)。命中觸控點(diǎn)的實(shí)現(xiàn)代碼如下：

int checkPointToMove(Offset pressedPoint) {
    // 控制點(diǎn)非空才查找
    if (points.isNotEmpty) {
      var pointsToCheck = <Offset>[];
      final maxDistance = 10.0;
      // 查找觸控響應(yīng)范圍內(nèi)的控制點(diǎn)
      for (Offset p in points) {
        if ((p.dx - pressedPoint.dx).abs() < maxDistance &&
            (p.dy - pressedPoint.dy).abs() < maxDistance) {
          pointsToCheck.add(p);
        }
      }
      
      // 未找到
      if (pointsToCheck.length == 0) {
        return -1;
      } else if (pointsToCheck.length == 1) {
        // 只有一個(gè)點(diǎn)，直接返回
        return points.indexOf(pointsToCheck[0]);
      } else {
        // 有多個(gè)點(diǎn)命中，找到距離最近的點(diǎn)返回
        Offset point = pointsToCheck[0];
        var distance = distanceBetween(pointsToCheck[0], pressedPoint);
        for (int i = 1; i < pointsToCheck.length; i++) {
          var newDistance = distanceBetween(pointsToCheck[i], pressedPoint);
          if (newDistance < distance) {
            point = pointsToCheck[i];
            distance = newDistance;
          }
        }

        return points.indexOf(point);
      }
    }

    return -1;
  }

移動(dòng)過程的處理就比較簡單了，我們已經(jīng)找到了命中的控制點(diǎn)，那就在觸控位置移動(dòng)監(jiān)聽響應(yīng)方法onPointerMove中更新控制點(diǎn)位置，并重新繪制即可，代碼如下，其中indexOfPointToMove是一個(gè)狀態(tài)變量，即找到的控制點(diǎn)下標(biāo)：

onPointerMove: ((event) {
  if (indexOfPointToMove != -1) {
    points[indexOfPointToMove] = event.localPosition;
    setState(() {});
  }
}),

應(yīng)用

邏輯完成了，我們就來做一個(gè)繪制應(yīng)用吧。考慮端午節(jié)快到了，我們嘗試來繪制一個(gè)粽子的線條畫看看。下面是調(diào)整前后的對比效果以及調(diào)整過程的動(dòng)圖，可以看到，調(diào)整后的還是更像粽子一些。

總結(jié)

本篇介紹了如何通過拖拽調(diào)整貝塞爾曲線繪制的控制點(diǎn)來調(diào)整圖形的繪制，實(shí)際上很多繪圖都可能用到拖拽式的控制點(diǎn)位的調(diào)整，比如電子圍欄的設(shè)置。實(shí)際上主要的代碼是判斷觸控位置命中了具體哪個(gè)控制點(diǎn)。本篇代碼已經(jīng)上傳至：繪圖相關(guān)代碼。