iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
1
Modern Web

用 Javascript 當個影像魔術師系列 第 24

Day 24 - Canvas 常用套件 - fabric js 介紹

Day 24 - Canvas 常用套件 - fabric js 介紹

之前的實作上幾乎都是使用原生的方式跟 Canvas 作互動或者影像處理,而其實現在有許多套件有封裝好許多東西方便我們使用,接下來的時間就來介紹一些吧!

fabric js

先前我們使用在 Canvas 的用法大都以原生操控使用為主,而 fabricjs 則幫我們封裝好了許多在互動上需要常使用的操作,例如在影像濾鏡上面就有實作我們之前提到的濾鏡如亮度、飽和度,銳利化等等,而在一般的互動上,原生的 Canvas 如果要進行繪製圖案或線條的動作其實蠻麻煩,而 fabricjs 封裝了許多基本圖案及互動,讓我們可以直接使用,就讓我們接著下去吧!

首先先安裝

 npm install fabric --save

接著在引入上要注意需要這樣使用

import { fabric } from 'fabric'

接著就可以開始使用了

const canvas = this.$refs.drawCanvas
// 將 canvas 傳入
const fabricCanvas = new fabric.Canvas(canvas)
// 從 url 讀取圖片
fabric.Image.fromURL(img2, img => {
    const oImg = img.set({
    // 這邊可以設定上下左右距離、角度、寬高等等
      left: 0
      // top: 100
      // angle: 15,
      // width: 500,
      // height: 500
    })
    // 將圖片縮放到寬高
    oImg.scaleToWidth(cw)
    oImg.scaleToHeight(ch)
    // 記得要加進入才會顯示
    fabricCanvas.add(oImg)
    // 使用亮度濾鏡
    const filter = new fabric.Image.filters.Brightness({
      brightness: 0.5
    })
    oImg.filters.push(filter)
    oImg.applyFilters()
  })

主要可以看到提供了很多屬性可以設定,例如上下距離,在之前我們都要透過繁瑣的 drawimagegetimage 然後指定距離來使用,現在可以直接設定,接下來濾鏡部分使用也很簡單,找到想要的濾鏡並直接填入強度就好,其他濾鏡用法也大同小異,像是之前實作的飽和度、銳利化等等常用濾鏡都有,而且詳細看了濾鏡實作之後發現是有使用 WEB GL 來實作的,有空再來深入研究一下。

但我覺得其實最厲害的是當你加入一些圖案或者是線條的時候,每一個都會被視為一個物件,而且都有常用的控制,例如旋轉、縮放等等,像是以下這段

  const circle = new fabric.Circle({
    radius: 80, fill: 'green', left: 100, top: 100
  })
  const triangle = new fabric.Triangle({
    width: 120, height: 180, fill: 'blue', left: 300, top: 200
  })
  const editText = new fabric.IText('雙擊我編輯', {
    top: 400,
    left: 400
  })
  fabricCanvas.add(circle, triangle, editText)

我們創了三個物件,分別是圓形、三角形、互動文字,最後呈現

可以看到原生這些物件都有提供很良好的互動,如果是有在需要做一些圖片編輯器或者是畫板像是 你畫我猜 蠻適合用這個來做。

小結

這次的行程也參觀了很多藏傳佛教的寺廟,拉達克地區是印度地區中少見以佛教為主要信仰的地區,圖中的喇嘛正在準備慶典要用的畫,因為通常在儀式完後就會放在水裡漂走,所以難得可以看見實體!

今天簡單介紹了一下 fabricjs 的基本用法,明天在來做一些應用吧!


上一篇
Day 23 - Canvas 效能調整 - Webassembly (下)
下一篇
Day 25 - 做個梗圖編輯器 (上)
系列文
用 Javascript 當個影像魔術師30

尚未有邦友留言

立即登入留言