正文

使用 fabric.js 創(chuàng)建出來(lái)的畫(huà)布默認(rèn)是不能拖拽移動(dòng)的。

不過(guò)我們可以利用一些小技巧讓畫(huà)布具有被拖拽的能力，fabric.js 官網(wǎng)也提供了一個(gè) demo ，但文檔上并沒(méi)有詳細(xì)的講解拖拽畫(huà)布的實(shí)現(xiàn)原理。

本文就粗略分析一下這個(gè)原理。

原理解析

鼠標(biāo)拖拽的原理其實(shí)很簡(jiǎn)單，主要就3步：

• 鼠標(biāo)點(diǎn)擊元素
• 移動(dòng)鼠標(biāo)
• 松開(kāi)鼠標(biāo)

在鼠標(biāo)移動(dòng)時(shí)，獲取鼠標(biāo)當(dāng)前位置，然后修改被拖拽元素的位置。

當(dāng)松開(kāi)鼠標(biāo)時(shí)，也要獲取松手那刻鼠標(biāo)所在位置，然后設(shè)置元素的位置。

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

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script src="../js/fabric.js"></script>
<script>
  // 創(chuàng)建畫(huà)布
  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, // 底邊長(zhǎng)度
    height: 100, // 底邊到對(duì)角的距離
    fill: 'blue'
  })
  // 將矩形和三角形添加到畫(huà)布中
  canvas.add(rect, triangle)
  // 按下鼠標(biāo)事件
  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
    }
  })
  // 移動(dòng)鼠標(biāo)事件
  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
    }
  })
  // 松開(kāi)鼠標(biāo)事件
  canvas.on('mouse:up', function (opt) {
    this.setViewportTransform(this.viewportTransform)
    this.isDragging = false
  })
</script>

拖拽畫(huà)布的代碼來(lái)自官方案例。我刪減了部分元素。

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

按下鼠標(biāo)時(shí)

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
  }
})

通過(guò) mouse:down 事件，設(shè)置了按住 alt 鍵時(shí)再按下鼠標(biāo)左鍵，才能觸發(fā)拖拽事件（開(kāi)始）。

自定義3個(gè)屬性：

• isDragging: 拖拽狀態(tài)，true 表示可拖拽
• lastPosX: 畫(huà)布上一個(gè)x坐標(biāo)
• lastPosY: 畫(huà)布上一個(gè)y坐標(biāo)

為什么要記錄 lastPosX 和 lastPosY 呢？

把鼠標(biāo)點(diǎn)擊時(shí)，鼠標(biāo)所在的位置記錄下來(lái)。之后移動(dòng)時(shí)，再通過(guò)鼠標(biāo)新出現(xiàn)的位置和點(diǎn)擊時(shí)的位置對(duì)比，就能計(jì)算出鼠標(biāo)移動(dòng)了多少距離，然后再調(diào)整畫(huà)布移動(dòng)的距離即可。

移動(dòng)鼠標(biāo)時(shí)

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
  }
})

通過(guò) mouse:move 可以監(jiān)聽(tīng)鼠標(biāo)的移動(dòng)。

此時(shí)就要通過(guò) isDragging 判斷是否進(jìn)入拖拽狀態(tài)。

viewportTransform 是 fabric.js 在畫(huà)布上的一個(gè)屬性。

官方文檔是這樣介紹的：

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

上面的代碼，修改了 viewportTransform 下標(biāo)為 4 和 5 的元素。

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

e.clientX - this.lastPosX 就是鼠標(biāo)移動(dòng)的x軸方向的距離，e.clientY - this.lastPosY 可以計(jì)算出鼠標(biāo)移動(dòng)的y軸方向的距離。

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

requestRenderAll() 是在每次移動(dòng)完畫(huà)布就刷新一下。

刷新完畫(huà)布，就把上一個(gè)點(diǎn)（x和y坐標(biāo)）改成最新的：this.lastPosX = e.clientX 和 this.lastPosY = e.clientY ，給下次移動(dòng)鼠標(biāo)時(shí)提供一個(gè)參考值，方便計(jì)算。

松開(kāi)鼠標(biāo)時(shí)

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

使用 setViewportTransform 設(shè)置畫(huà)布的視圖。

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

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

代碼倉(cāng)庫(kù)

?拖拽移動(dòng)畫(huà)布

以上就是Fabric.js 拖拽平移畫(huà)布方法示例的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 拖拽平移畫(huà)布的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論