第十屆 優選

web
Fabricjs 筆記
Nono

系列文章

DAY 21

Day 21 - Fabricjs Zoom in & Zoom out

今天來做 Fabricjs 的縮放畫布 Zoom 只要透過修改 Zoom 值,就能夠讓畫布做到縮放的效果,fabricjs 會主動幫我們調整物件的大小。 預設...

DAY 22

Day 22 - Fabricjs 圖形裁切基礎介紹

裁切功能在一般圖片編輯軟體相當的常見,這邊也能夠透過 Fabricjs 來做圖片裁切的功能,甚至可以做出讓使用者自行決定裁切的位置,切出他們想要留下的範圍,或...

DAY 23

Day 23 - Fabricjs 圖形裁切進階

接續昨天 Day 22 - Fabricjs 圖形裁切基礎介紹 繼續來做一些圖片裁切的進階操作,一樣使用 clipPath 來做更多的變化,以下是今天的大綱,...

DAY 24

Day 24 - Fabricjs 實作: 自訂圖片裁切

在經過了兩天的裁切介紹,今天要來介紹另外一種方式來做圖片的裁切! 透過實作圖片裁切功能,來了解 image.crop 這個屬性的使用。 來實現能夠讓使用者自訂...

DAY 25

Day 25 - Fabricjs 實作: 拼貼圖片

今天來實作一個圖片編輯常用的功能: 拼貼。 顧名思義就是能把自己圖片拼到已經設定好的框框中,而圖片可以在框框中調整要顯示的部分,也就是固定位置的裁切功能。 配合...

DAY 26

Day 26 - Fabricjs 進階自訂控制項

今天要來做更進階的自訂控制項,不只能夠修改內建的一些樣式,夠能夠讓我們使用自己想要的圖示來做控制項,甚至變更每個控制項的功能。 今日就來做把左上控制項改成刪除...

DAY 27

Day 27 - 使用插件客製控制項

DEMO 今天來使用 fabricjs-customise-controls-extension,來做到更快速方便的客製化控制項。 昨天客製化控制項需要去查看...

DAY 28

Day 28 - 談談效能相關

Fabricjs 作為了個已經出來了將近 10 年的 library (from 2008),也就是 ie 還盛行的年代,經歷 web 前端技術改變的考驗,到...

DAY 29

Day 29 - Fabricjs 物件填充背景 Pattern

Fabricjs 可以將圖片設定為其他物件的填充色,今天就來介紹一些幫物件填入圖片的方法。 Object.setPatternFill 透過使用物件的 setP...

DAY 30

Day 30 - 總結

Fabricjs 在算是在網頁前端生存了相當久的一個 Canvas Library(從 2008 - 今天),對於做線上編輯功能這部分是非常強大的,但在對做出特...