Android如何利用控制點(diǎn)的拖拽畫一個(gè)粽子

本文小編為大家詳細(xì)介紹“Android如何利用控制點(diǎn)的拖拽畫一個(gè)粽子”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Android如何利用控制點(diǎn)的拖拽畫一個(gè)粽子”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

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

拖拽控制點(diǎn)實(shí)現(xiàn)這里有兩個(gè)主要邏輯：

• 控制點(diǎn)的命中判斷：即拖拽開(kāi)始時(shí)判斷哪個(gè)控制點(diǎn)被命中，需要移動(dòng)。

• 監(jiān)聽(tīng)觸控位置的移動(dòng)過(guò)程：移動(dòng)過(guò)程中動(dòng)態(tài)繪制新的圖形，以便直接看到對(duì)應(yīng)的效果。

控制點(diǎn)的命中判斷在完成繪制后，首先需要監(jiān)聽(tīng)觸控按下事件，看看觸控點(diǎn)是否覆蓋了某個(gè)控制點(diǎn)的觸控響應(yīng)范圍，同時(shí)對(duì)于距離較近的點(diǎn)，可能會(huì)同時(shí)命中多個(gè)點(diǎn)的觸控響應(yīng)范圍，這個(gè)時(shí)候需要取距離最近的那個(gè)點(diǎn)。對(duì)于觸控范圍，我們定義為每個(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)過(guò)程的處理就比較簡(jiǎn)單了，我們已經(jīng)找到了命中的控制點(diǎn)，那就在觸控位置移動(dòng)監(jiān)聽(tīng)響應(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)用

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

讀到這里，這篇“Android如何利用控制點(diǎn)的拖拽畫一個(gè)粽子”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。