圖形編輯器中JS實現防誤操作之拖拽阻塞

2023-03-07 06:01:12

圖形編輯器中

在圖形編輯器中，想象這麼一個場景，我們復原了一些重要的操作，然後想選中一個圖形，看看它的屬性。你點了上去，然後你發現你再也無法重做了。

你以為你點了一下，但其實你點選的時候，滑鼠還是小小移動了一點，飄了一個畫素點。對編輯器來說，它識別到讓圖形移動一個畫素點的操作，就生成了一個新的版本，然後重做棧（redoStack）被清空了，你退回前的操作就沒了。

為了解決這類使用者微小操作的問題，我們可以巧妙地給拖拽行為加一個 阻塞閾值。具體就是就是按下滑鼠後，移動滑鼠的距離要大於某個值，我們才認為發生了拖拽，並執行對應工具的邏輯。

下面為我們要實現的效果。此處為了更好地演示效果，將閾值設定得很大。通常設定個 4px 就夠了。

可以看到，按下滑鼠然後移動，如果移動的位移太小，矩形是不會被移動的，直到達到一定位移閾值後，矩形才會乖乖聽話跟隨滑鼠進行移動。

閾值表示位移距離，使用的是視口座標系，而不是場景座標系。

程式碼改造

原來的邏輯：

let isPressing = false;
let currentTool = null; // 當前工具物件
// 滑鼠按下
function handleDown(e) {
  isPressing = true;
  currentTool.start(e);
}
// 滑鼠移動
function handleMove(e) {
  if (isPressing) {
    currentTool.drag(e);
  } else {
    // 非拖拽的移動事件
    // 比如選擇工具停留在圖形上，圖形要高亮，此時沒發生拖拽
    currentTool.move(e);
  }
}
// 滑鼠釋放
function handleUp(e) {
  currentTool.end(e);
  isPressing = false;
}

滑鼠按下時，isPressing 設定為 true，表示發生了滑鼠按下事件。

此時滑鼠再移動，我們就能知道這是一個 “拖拽” 的行為，即按下滑鼠不放然後移動滑鼠的行為。此時呼叫工具物件的 drag 方法。

最後滑鼠釋放，將狀態 isPressing 重置。

現在我們進行改造。

let isPressing = false;
let currentTool = null; // 當前工具物件
let isEnableDragging = false; // 是否呼叫工具物件的 drag 方法
let startPos = null; // 儲存滑鼠按下時的座標
const blockStep = 4; // 閾值
function handleDown(e) {
  isPressing = true;
  isEnableDragging = false;
  startPos = { x: e.clientX, y: e.clientY };
  currentTool.start(e);
}
function handleMove(e) {
  // 判斷位移是否突破閾值，是的話更新狀態為 「可拖拽」
  if (
    !isEnableDragging &&
    (Math.abs(e.clientX - startPos.x) > blockStep ||
      Math.abs(e.clientX - startPos.x) > blockStep)
  ) {
    isEnableDragging = true;
  }
  if (isPressing) {
    if (isEnableDragging) {
      // 「可拖拽」 狀態，呼叫工具的 drag 方法
      currentTool.drag(e);
    }
  } else {
    currentTool.move(e);
  }
}
function handleUp(e) {
  currentTool.end(e);
  // 初始化狀態
  isPressing = false;
  isEnableDragging = false;
  startPos = null;
}

核心思路是引入 isEnableDragging 狀態，表示滑鼠移動時，是否達到移動的條件。

我們在滑鼠移動事件中，計算滑鼠按下和滑鼠移動之間的距離是否超過某個值，如果超過閾值，就將 isEnableDragging 狀態轉換為 true。

然後判斷 isEnableDragging 為 true，就呼叫工具物件的 drag 方法。

需要注意的是，不要只用位移距離來判斷是否可以拖拽，要配合狀態。否則突破閾值後，又移動回來，你會發現你又卡住了，因為此時閾值因為再次計算，沒能達到閾值。

所以加了個 isEnableDragging 狀態，在第一次突破閾值設定為 true 後，就再也不用計算位移了，之後一直都是可拖拽狀態，直到滑鼠釋放重置狀態。

結尾

拖拽阻塞是開發圖形編輯器的一點小細節，並不複雜，但能帶來很好的使用者體驗。

以上就是圖形編輯器中JS實現防誤操作之拖拽阻塞的詳細內容，更多關於JS 拖拽阻塞的資料請關注it145.com其它相關文章！

圖形編輯器中JS實現防誤操作之拖拽阻塞

目錄

圖形編輯器中

程式碼改造

結尾

熱門文章