Fabric.js 拖拽平移畫布方法範例

2023-02-16 06:01:59

正文

使用 fabric.js 建立出來的畫布預設是不能拖拽移動的。

不過我們可以利用一些小技巧讓畫布具有被拖拽的能力，fabric.js 官網也提供了一個 demo ，但檔案上並沒有詳細的講解拖拽畫布的實現原理。

本文就粗略分析一下這個原理。

原理解析

滑鼠拖拽的原理其實很簡單，主要就3步：

滑鼠點選元素
移動滑鼠
鬆開滑鼠

在滑鼠移動時，獲取滑鼠當前位置，然後修改被拖拽元素的位置。

當鬆開滑鼠時，也要獲取鬆手那刻滑鼠所在位置，然後設定元素的位置。

先看看官方給出的例子再逐步分析

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script src="../js/fabric.js"></script>
<script>
  // 建立畫布
  let canvas = new fabric.Canvas('c', {
    allowTouchScrolling: true
  })
  // 矩形
  const rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 10,
    top: 10,
    fill: 'pink'
  })
  // 三角形
  const triangle = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80, // 底邊長度
    height: 100, // 底邊到對角的距離
    fill: 'blue'
  })
  // 將矩形和三角形新增到畫布中
  canvas.add(rect, triangle)
  // 按下滑鼠事件
  canvas.on('mouse:down', function (opt) {
    var evt = opt.e;
    if (evt.altKey === true) {
      this.isDragging = true
      this.lastPosX = evt.clientX
      this.lastPosY = evt.clientY
    }
  })
  // 移動滑鼠事件
  canvas.on('mouse:move', function (opt) {
    if (this.isDragging) {
      var e = opt.e;
      var vpt = this.viewportTransform;
      vpt[4] += e.clientX - this.lastPosX
      vpt[5] += e.clientY - this.lastPosY
      this.requestRenderAll()
      this.lastPosX = e.clientX
      this.lastPosY = e.clientY
    }
  })
  // 鬆開滑鼠事件
  canvas.on('mouse:up', function (opt) {
    this.setViewportTransform(this.viewportTransform)
    this.isDragging = false
  })
</script>

拖拽畫布的程式碼來自官方案例。我刪減了部分元素。

從上面的程式碼可以看出，主要事件是 mouse:down、mouse:move、mouse:up。

按下滑鼠時

canvas.on('mouse:down', function (opt) {
  var evt = opt.e;
  if (evt.altKey === true) {
    this.isDragging = true
    this.lastPosX = evt.clientX
    this.lastPosY = evt.clientY
  }
})

通過 mouse:down 事件，設定了按住 alt 鍵時再按下滑鼠左鍵，才能觸發拖拽事件（開始）。

自定義3個屬性：

isDragging: 拖拽狀態，true 表示可拖拽
lastPosX: 畫布上一個x座標
lastPosY: 畫布上一個y座標

為什麼要記錄 lastPosX 和 lastPosY 呢？

把滑鼠點選時，滑鼠所在的位置記錄下來。之後移動時，再通過滑鼠新出現的位置和點選時的位置對比，就能計算出滑鼠移動了多少距離，然後再調整畫布移動的距離即可。

移動滑鼠時

canvas.on('mouse:move', function (opt) {
  if (this.isDragging) {
    var e = opt.e;
    var vpt = this.viewportTransform;
    vpt[4] += e.clientX - this.lastPosX
    vpt[5] += e.clientY - this.lastPosY
    this.requestRenderAll()
    this.lastPosX = e.clientX
    this.lastPosY = e.clientY
  }
})

通過 mouse:move 可以監聽滑鼠的移動。

此時就要通過 isDragging 判斷是否進入拖拽狀態。

viewportTransform 是 fabric.js 在畫布上的一個屬性。

官方檔案是這樣介紹的：

The transformation (a Canvas 2D API transform matrix) which focuses the viewport

上面的程式碼，修改了 viewportTransform 下標為 4 和 5 的元素。

viewportTransform[4]: 水平位移（x軸）
viewportTransform[5]: 垂直位移（y軸）

e.clientX - this.lastPosX 就是滑鼠移動的x軸方向的距離，e.clientY - this.lastPosY 可以計算出滑鼠移動的y軸方向的距離。

如果想了解 viewportTransform 每個元素代表什麼，可以看看《Fabric.js 變換視窗》

requestRenderAll() 是在每次移動完畫布就重新整理一下。

重新整理完畫布，就把上一個點（x和y座標）改成最新的：this.lastPosX = e.clientX 和 this.lastPosY = e.clientY ，給下次移動滑鼠時提供一個參考值，方便計算。

鬆開滑鼠時

canvas.on('mouse:up', function (opt) {
  this.setViewportTransform(this.viewportTransform)
  this.isDragging = false
})

使用 setViewportTransform 設定畫布的檢視。

並退出拖拽模式：isDragging = false 。

以上就是在 fabric.js 中拖拽畫布的方法。

程式碼倉庫

⭐拖拽移動畫布

以上就是Fabric.js 拖拽平移畫布方法範例的詳細內容，更多關於Fabric.js 拖拽平移畫布的資料請關注it145.com其它相關文章！