本文簡介

點(diǎn)贊 + 關(guān)注 + 評論 = 學(xué)會了

在使用 Fabric.js 開發(fā)時，可能會需要將元素居中。

本文總結(jié)了 Fabric.js 常用的將元素居中的方法，其中包括：

• 基于視窗的水平居中
• 基于畫布的水平居中
• 帶動畫效果的水平居中
• 基于視窗的垂直居中
• 基于畫布的垂直居中
• 帶動畫效果的垂直居中
• 同時實(shí)現(xiàn)水平和垂直居中（也是分基于視窗或基于畫布的）

除此之外，還總結(jié)了 在畫布層面居中指定元素 和 元素自身調(diào)用居中方法 。

閱讀本文需要你有一定的 Fabric.js 基礎(chǔ)，如果還不太了解 Fabric.js 是什么，可以閱讀 《Fabric.js 從入門到膨脹》

創(chuàng)建基礎(chǔ)項(xiàng)目

為了方便演示，我在初始化畫布的時：

1. 添加一個背景圖，該背景圖的尺寸和初始化的畫布一樣大。
2. 添加一個矩形，之后要居中的對象就是它了。
3. 添加鼠標(biāo)滾輪滾動時縮放畫布（方便演示 基于視窗 和 基于畫布 的區(qū)別）。
4. 添加鼠標(biāo)拖拽畫布平移位置（方便演示 基于視窗 和 基于畫布 的區(qū)別）。

file

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化畫布
  const canvas = new fabric.Canvas('canvasBox')

  // 設(shè)置背景圖
  fabric.Image.fromURL('../../images/bg2.jpg', img => {
    canvas.setBackgroundImage(
      img,
      canvas.renderAll.bind(canvas),
      { // 將背景圖的寬高設(shè)置成畫布的寬高
        scaleX: canvas.width / img.width,
        scaleY: canvas.height / img.height
      }
    )
  })

  // 創(chuàng)建矩形
  const rect = new fabric.Rect({
    name: 'rect',
    top: 60, // 距離容器頂部 60px
    left: 60, // 距離容器左側(cè) 200px
    fill: 'orange', // 填充a 橙色
    width: 60, // 寬度 60px
    height: 60, // 高度 60px
    originX: 'center',
    originY: 'center'
  })

  // 將矩形添加到畫布中
  canvas.add(rect)

  // 滾輪滾動時可修改畫布縮放等級
  canvas.on('mouse:wheel', opt => {
    const delta = opt.e.deltaY // 滾輪，向上滾一下是 -100，向下滾一下是 100
    let zoom = canvas.getZoom() // 獲取畫布當(dāng)前縮放值
    zoom *= 0.999 ** delta
    if (zoom > 20) zoom = 20
    if (zoom < 0.01) zoom = 0.01
    canvas.zoomToPoint(
      { // 關(guān)鍵點(diǎn)
        x: opt.e.offsetX,
        y: opt.e.offsetY
      },
      zoom
    )
  })

  /* 拖拽畫布 */
  canvas.on('mouse:down', opt => { // 鼠標(biāo)按下時觸發(fā)
    let evt = opt.e
    canvas.isDragging = true // isDragging 是自定義的
    canvas.lastPosX = evt.clientX // lastPosX 是自定義的
    canvas.lastPosY = evt.clientY // lastPosY 是自定義的
  })

  canvas.on('mouse:move', opt => { // 鼠標(biāo)移動時觸發(fā)
    if (canvas.isDragging) {
      let evt = opt.e
      let vpt = canvas.viewportTransform // 聚焦視圖的轉(zhuǎn)換
      vpt[4] += evt.clientX - canvas.lastPosX
      vpt[5] += evt.clientY - canvas.lastPosY
      canvas.requestRenderAll()
      canvas.lastPosX = evt.clientX
      canvas.lastPosY = evt.clientY
    }
  })

  canvas.on('mouse:up', opt => { // 鼠標(biāo)松開時觸發(fā)
    canvas.setViewportTransform(canvas.viewportTransform) // 設(shè)置此畫布實(shí)例的視口轉(zhuǎn)換  
    canvas.isDragging = false
  })
</script>

代碼有點(diǎn)多，但 滾輪滾動時可修改畫布縮放等級 和 拖拽畫布 部分其實(shí)可以不要的，寫上這些代碼主要是為了方便演示。

以下所有例子中所指的元素都是 rect ，因?yàn)楸纠?rect 進(jìn)行講解。你需要根據(jù)實(shí)際項(xiàng)目中要操作的對象進(jìn)行調(diào)整。

水平居中

將指定元素水平居中。

基于視窗

file

<button onclick="centerH()">水平居中</button>

<script>
  // 省略部分代碼

  // 水平居中
  function centerH() {
    // 從畫布的角度操作對象
    canvas.viewportCenterObjectH(rect)

    // 元素自己根據(jù)視窗進(jìn)行居中
    // rect.viewportCenterH()
  }
</script>

上面我寫了2中方法，方法1是用畫布操作指定的對象；方法2是元素自己根據(jù)視窗來調(diào)整自己的位置。

我直接上圖來解釋一下什么是 根據(jù)視窗水平居中元素

縮放的情況

file

移動畫布的情況

file

在縮放和移動畫布之后，canvas.viewportCenterObjectH 和 rect.viewportCenterH 還是會根據(jù)根據(jù)視窗的標(biāo)準(zhǔn)來水平居中。

基于畫布

file

// 省略部分代碼
canvas.centerObjectH(rect)

// 元素自己根據(jù)畫布進(jìn)行居中
// rect.centerH()

縮放的情況

file

移動畫布的情況

file

可以和 基于視窗 的效果對比一下。

帶動畫效

file

// 省略部分代碼
canvas.fxCenterObjectH(rect)

帶動畫的效果需要在畫布中調(diào)用 fxCenterObjectH 方法。帶動畫效果的居中是根據(jù)畫布來居中的，并非視窗！

垂直居中

垂直居中和水平居中的用法差不多，只是改了一下api。水平居中是用 “H” ，垂直居中用 “V”。

基于視窗

file

// 省略部分代碼

canvas.viewportCenterObjectV(rect)

// 元素自己根據(jù)視窗進(jìn)行居中
// rect.viewportCenterV()

基于畫布

// 省略部分代碼

canvas.centerObjectH(rect)

// 元素自己根據(jù)畫布進(jìn)行居中
// rect.centerH()

帶動畫效果

file

// 省略部分代碼

canvas.fxCenterObjectV(rect)

水平 + 垂直 同時居中

Fabric.js 還提供同時水平和垂直居中的功能。

基于視窗

file

// 省略部分代碼

canvas.viewportCenterObject(rect)

// 元素自己根據(jù)視窗進(jìn)行居中
// rect.viewportCenter()

基于畫布

file

// 省略部分代碼

canvas.centerObject(rect)

// 元素自己根據(jù)畫布進(jìn)行居中
rect.center()

帶動畫效果

暫時還沒發(fā)現(xiàn)同時垂直和水平居中有帶動畫效果的api，所以可以嘗試同時調(diào)用 fxCenterObjectH 和 fxCenterObjectV

file

// 省略部分代碼

function fxCenter() {
  canvas.fxCenterObjectH(rect)
  canvas.fxCenterObjectV(rect)
}

代碼倉庫

?Fabric 居中元素

推薦閱讀

??《Fabric.js 上標(biāo)和下標(biāo)的使用偏方》

??《Fabric.js 縮放畫布》

??《Fabric.js 筆刷到底怎么用？》

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會了