DEMO

今天來使用 fabricjs-customise-controls-extension，來做到更快速方便的客製化控制項。

昨天客製化控制項需要去查看 Fabricjs 的原始碼，並且複寫他們，在使用上是非常不方便的，所以就有了做了這樣的插件，可以更直覺方便地使用。

但目前完整支持到 Fabricjs 1.6.0 版本，若要使用新版 Fabricjs 2.0 以上的版本，則需使用 github 上 next 分支的版本。

其實這個插件的原理也是複寫 Fabricjs 原始碼中的 prototype，就和我們昨天做的事情類似，不過他有做一些特別的改寫，就讓我們來看看吧。

如何使用

目前我自己是沒有找到這個插件的 cdn，所以可以到他的 github 抓到原始碼。

且因為要使用 Fabricjs 2.0.0 以上，所以得使用 next 分支中的檔案。

fabricjs-customise-controls-extension

今天是在本地端開發
簡單載入要用的 js 資源

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="./src/customiseControls.js"></script>

擴充 fabricjs

這個插件分別擴充了兩個功能

• fabric.Object.prototype.customiseCornerIcons 用來設置控制項長相的。
• fabric.Canvas.prototype.customiseControls 設置點選控制項功能以及 cursor

fabric.Object.prototype.customiseCornerIcons

settings 控制項基礎設定

tl、tr、mb、br、bl... 同 Fabricjs 對控制項的代號，可設置個別使用的 icon。

tl: {
  icon: './src/baseline-refresh-24px.svg'
}

可用 svg or png or jpg

 fabric.Object.prototype.customiseCornerIcons({
      settings: {
        borderColor: 'black',
        cornerSize: 22,
        cornerShape: 'circle',
        cornerBackgroundColor: 'blue',
        cornerPadding: 10
      },
      tl: {
        icon: './src/baseline-refresh-24px.svg'
      },
      tr: {
        icon: './src/baseline_delete_forever_black_18dp.png'
      },
      bl: {
        icon: './src/baseline_add_black_18dp.png'
      },
      br: {
        icon: './src/baseline_arrow_downward_black_18dp.png'
      },
      mr: {
        icon: './src/baseline_arrow_upward_black_18dp.png'
      },
      mb: {
        icon: './src/baseline-grade-24px.svg'
      },
      mtr: {
        icon: './src/baseline-grade-24px.svg'
      },
    }, function() {
      canvas.renderAll()
    })

接著我們看看功能的部分要如何來擴充。

fabric.Canvas.prototype.customiseControls

這個擴充功能在於控制項的功能更改，以及滑上去滑鼠標的改變。

直接看範例

tl: {
  action: 'rotate',
  cursor: './src/baseline-refresh-24px.svg'
}

action 為功能

內建有

• drag 移動
• scale 縮放
• scaleX 縮放X
• scaleY 縮放Y
• rotate 旋轉
• remove 移除
• moveUp 上移自層
• moveDown 下移一層
• rotateByDegrees 選轉固定角度

自訂功能

雖然已經提供相當多的功能讓我們使用了，但還是少不了自訂一些功能，只要將 action 設定為 function 就能夠自訂囉。

  mb: {
    action: function () {
      alert('加入我的最愛')
    },
    cursor: 'pointer'
  }

且透過回傳參數做更多變化。
這邊實作複製原來的物件。

  bl: {
    action: function (e, target) {
      target.clone(function (cloneObj) {
        cloneObj.set({
          left: cloneObj.left + 20,
          top: cloneObj.top + 20
        })
        cloneObj.setCoords()
        canvas.add(cloneObj)
        canvas.renderAll()
      })
    },
    cursor: 'pointer'
  }

完整 customiseControls 設定

fabric.Canvas.prototype.customiseControls({
  tl: {
    action: {
      'rotateByDegrees': 20
    },
    cursor: './src/baseline-refresh-24px.svg'
  },
  tr: {
    action: 'remove',
    cursor: 'pointer'
  },
  bl: {
    action: function (e, target) {
      target.clone(function (cloneObj) {
        cloneObj.set({
          left: cloneObj.left + 20,
          top: cloneObj.top + 20
        })
        cloneObj.setCoords()
        canvas.add(cloneObj)
        canvas.renderAll()
      })
    },
    cursor: 'pointer'
  },
  br: {
    action: 'moveDown',
    cursor: 'pointer'
  },
  mb: {
    action: function () {
      alert('加入我的最愛')
    },
    cursor: 'pointer'
  },
  mt: {
    action: 'scaleY'
  },
  mr: {
    action: 'moveUp',
    cursor: 'pointer'
  },
  mtr: {
    action: 'rotate',
  },
}, function() {
    canvas.renderAll()
})

本日小結

今天用了 fabricjs-customise-controls-extension 來做客製化控制項，比起昨天還要去研究 Fabricjs 原始碼，直接擴充兩個 prototype 實在是方便太多了。

期待未來這個插件的作者也能將這些功能合併到 fabricjs 核心，讓我們使用起來更加的方便。

參考連結

• fabricjs-customise-controls-extension
• 今日 github page demo
• Day 26 - Fabricjs 進階自訂控制項