fabric.js

來源：https://mp.weixin.qq.com/s/RXYTmy-JlHc5Zng3eMT_Yg

以下文章來源于前埔寨，作者榮頂

前埔寨.https://mp.weixin.qq.com/s/8mlVoTVgF6q-DUiAt8OXqg

1.導語

我們想在畫布上畫個基本的簡單形狀的時候，使用 Canvas 不會覺得有什麼繁瑣。但當畫布上需要任何形式的互動，繪制複雜的圖形和在特定情況需要改變圖檔的時候,使用原生 canvas API 将會變得很困難。

而 Fabric 旨在解決這個問題。

Fabric.js 是一個強大而簡單的 Javascript HTML5 畫布庫 Fabric 在畫布元素之上提供互動式對象模型 Fabric 還具有 SVG-to-canvas（和 canvas-to-SVG）解析器

為了友善,下面我将通過 vue項目為大家講解如何使用 Fabric

2. 安裝

yarn add fabric -S
#or
npm i fabric -S

也可以在官網下載下傳最新 js 檔案,通過 script 标簽引入

3. 使用

<!-- html -->  
<canvas id="canvas" width="500" height="500"></canvas>

3.1 繪制一個簡單的圖形

Fabric 提供了 7 種基礎形狀：

fabric.Circle (圓)

fabric.Ellipse (橢圓)

fabric.Line (線)

fabric.Polyline (多條線繪制成圖形)

fabric.triangle (三角形)

fabric.Rect (矩形)

fabric.Polygon (多邊形)

矩形

//引入fabric  
import { fabric } from "fabric";  

// 建立一個fabric執行個體  
let canvas = new fabric.Canvas("canvas"); //可以通過滑鼠方法縮小,旋轉  
// or  
// let canvas = new fabric.StaticCanvas("canvas");//沒有滑鼠互動的fabric對象  

// 建立一個矩形對象  
let rect = new fabric.Rect({  
    left: 200, //距離左邊的距離  
    top: 200, //距離上邊的距離  
    fill: "green", //填充的顔色  
    width: 200, //矩形寬度  
    height: 200, //矩形高度  
});  

// 将矩形添加到canvas畫布上  
canvas.add(rect);

可以看到界面中填充了一個可以通過滑鼠放大縮小且可以旋轉的綠色矩形

通過對象的形式配置元素樣式,非常的友善!

圓形和三角形

let circle = new fabric.Circle({  
    left: 0, //距離左邊的距離  
    top: 0, //距離上邊的距離  
    fill: "red", //填充的顔色  
    radius: 50, //圓的半徑  
});  
// 建立一個三角形對象  
let triangle = new fabric.Triangle({  
    left: 200, //距離左邊的距離  
    top: 0, //距離上邊的距離  
    fill: "blue", //填充的顔色  
    width: 100, //寬度  
    height: 100, //高度  
});  
// 将圖形形添加到canvas畫布上  
canvas.add(circle, triangle);

我們可以通過以下屬性設定,決定是否可以對相關元素進行互動

rect.set("selectable", false); // 隻是禁止這個矩形選中

3.2 繪制圖檔

主要有通過 url 和 img 标簽繪制兩種方式

fabric.Image.fromURL(  
    //本地圖檔需要通過require來引入,require("./xxx.jpeg")  
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.thaihot.com.cn%2Fuploadimg%2Fico%2F2021%2F0711%2F1625982535739193.jpg&refer=http%3A%2F%2Fimg.thaihot.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630940858&t=e1d24ff0a7eaeea2ff89cedf656a9374",  
    (img) => {  
        img.scale(0.5);  
        canvas.add(img);  
    }  
);  
//也可以通過标簽繪制  
let img = document.getElementById("img");  
let image = new fabric.Image(img, {  
    left: 100,  
    top: 100,  
    opacity: 0.8,  
});  
canvas.add(image);

3.3 通過自定義的路徑繪制

在此之前我們需要了解幾個參數的含義

M : “move”移動到某點
L : “line”畫線 x,y
C : “curve”曲線
A : “arc”弧
z : 閉合路徑(類似 PS 中的建立選區)

customPath.set({  
    left: 100,  
    top: 100,  
    fill: "green",  
});  
canvas.add(customPath);

    "M 0 0 L 300 100 L 170 100 L 70 300 L 20 200 C136.19,2.98,128.98,0,121.32,0 z"  
);

可以看到通過路徑繪制,我們可以制作非常複雜的圖形(但是一般用不到,我們一般用它來解析 SVG 後拿到 path 複原圖形)

3.4 動畫

第一個參數是動畫的屬性，第二個參數是動畫的最終位置，第三個參數是一個可選的對象，指定動畫的細節：持續時間，回調，動效等。

第三個參數主要有

duration 預設為 500ms。可以用來改變動畫的持續時間。

from 允許指定動畫屬性的起始值（如果我們不希望使用目前值）。

onComplete 動畫結束之後的回調。

easing 動效函數。

絕對動畫

let rect = new fabric.Rect({  
    left: 400, //距離左邊的距離  
    top: 200, //距離上邊的距離  
    fill: "green", //填充的顔色  
    width: 200, //寬度  
    height: 200, //高度  
});  
rect.animate("left", 100, {  
    onChange: canvas.renderAll.bind(canvas),  
    duration: 1000,  
});  
canvas.add(rect);

相對動畫(第二個參數通過+=,-=等來決定動畫的最終效果)

    onChange: canvas.renderAll.bind(canvas),  
    duration: 1000,  
});

rect.animate("angle", "-=90", {  
onChange: canvas.renderAll.bind(canvas),  
duration: 2000,  
});

定義動畫的動效函數

預設情況下，動畫使用“easeInSine”動效執行。如果這不是你需要的，fabric 為我們提供了很多内置動畫效果, fabric.util.ease 下有一大堆動效的選項。

常用的有

easeOutBounce

easeInCubic

，

easeOutCubic

easeInElastic

easeOutElastic

easeInBounce

和

easeOutExpo

等

    onChange: canvas.renderAll.bind(canvas),  
    duration: 1000,  
    easing: fabric.util.ease.easeOutBounce,  
});

3.5 圖像濾鏡

目前 Fabric 為我們提供了以下内置濾鏡

BaseFilter 基本過濾器
Blur 模糊
Brightness 亮度
ColorMatrix 顔色矩陣
Contrast 對比
Convolute 卷積
Gamma 伽瑪
Grayscale 灰階
HueRotation 色調旋轉
Invert 倒置
Noise 噪音
Pixelate 像素化
RemoveColor 移除顔色
Resize 調整大小
Saturation 飽和

單個濾鏡

    img.scale(0.5);  
    canvas.add(img);  
});  
fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {  
    img.scale(0.5);  
    // 添加濾鏡  
    img.filters.push(new fabric.Image.filters.Grayscale());  
    // 圖檔加載完成之後，應用濾鏡效果  
    img.applyFilters();  
    img.set({  
        left: 300,  
        top: 250,  
    });  
    canvas.add(img);  
});

疊加濾鏡

“filters”屬性是一個數組，我們可以用數組方法執行任何所需的操作：移除濾鏡（pop，splice，shift），添加濾鏡（push，unshift，splice），甚至可以組合多個濾鏡。當我們調用 applyFilters 時，“filters”數組中存在的任何濾鏡将逐個應用，是以讓我們嘗試建立一個既色偏又明亮（Brightness）的圖像。

    img.scale(0.5);  
    // 添加濾鏡  
    img.filters.push(  
        new fabric.Image.filters.Grayscale(),  
        new fabric.Image.filters.Sepia(), //色偏  
        new fabric.Image.filters.Brightness({ brightness: 0.2 }) //亮度  
    );  
    // 圖檔加載完成之後，應用濾鏡效果  
    img.applyFilters();  
    img.set({  
        left: 300,  
        top: 250,  
    });  
    canvas.add(img);  
});

可以看到多個濾鏡的效果疊加顯示了,當然 Fabric 還支援自定義濾鏡,在本篇文章點贊過 500 後我将更新 fabric 進階篇,感謝大家的支援~

3.6 顔色

無論你是使用十六進制，RGB 或 RGBA 顔色，Fabric 都能處理的很好

定義顔色

new fabric.Color("#aa3123");  
new fabric.Color("356333");  
new fabric.Color("rgb(100,50,100)");  
new fabric.Color("rgba(100, 200, 30, 0.5)");

顔色轉換

new fabric.Color('rgb(100,100,100)').toHex(); // "646464"  
new fabric.Color('fff').toHex(); // "FFFFFF"

我們還可以用另一種顔色疊加，或将其轉換為灰階版本。

let greenish = new fabric.Color("#5f5");  
redish.overlayWith(greenish).toHex(); // "AAAA55"  
redish.toGrayscale().toHex(); // "A1A1A1"

3.7 漸變

Fabric 通過 setGradient 方法支援漸變，在所有對象上定義。調用 setGradient('fill', { ... })就像設定一個對象的“fill”值一樣。

  left: 100,  
  top: 100,  
  radius: 50  
});  

circle.setGradient("fill", {  
    // 漸變開始的位置  
    x1: 0,  
    y1: 0,  
    // 漸變結束的位置  
    x2: circle.width,  
    y2: 0,  
    //漸變的顔色  
    colorStops: {  
        // 漸變的範圍(0,0.1,0.3,0.5,0.75,1)0-1之間都可以  
        0: "red",  
        0.2: "orange",  
        0.4: "yellow",  
        0.6: "green",  
        0.8: "blue",  
        1: "purple"  
    },  
});

3.8 文本

fabric.Text 對象對于文本,提供了比 canvas 更豐富的功能，包括：

支援多行 Multiline support 不幸的是，原生文本方法忽略了建立一行。

文本對齊 Text alignment 左，中，右。使用多行文本時很有用。

文本背景 Text background 背景也支援文本對齊。

文字裝飾 Text decoration 下劃線，上劃線，貫穿線。

行高 Line Height 在使用多行文本時有用。

字元間距 Char spacing 使文本更緊湊或更間隔。

子範圍 Subranges 将顔色和屬性應用到文本對象的子對象中。

多位元組 Multibyte 支援表情符号。

互動式畫布編輯 On canvas editing 可以直接在畫布上鍵入文本。

    "大家好~這裡是前埔寨\n我是榮頂~\n一個要成為開發王的男人!",  
    {  
        left: 0,  
        top: 200,  
        fontFamily: "Comic Sans", //字型  
        fontSize: 50, //字号  
        fontWeight: 800, //字型粗細,可以使用關鍵字（“normal”，“bold”）或數字（100,200,400,600,800）  
        shadow: "green 3px 3px 2px", //文字陰影,顔色，水準偏移，垂直偏移和模糊大小。
        underline: true, //下劃線  
        linethrough: true, //删除線  
        overline: true, //上劃線  
        fontStyle: "italic", //字型風格,normal（正常）或italic（斜體）  
        stroke: "#c3bfbf", //描邊的顔色  
        strokeWidth: 1, //描邊的寬度  
        textAlign: "center", //文本對齊方式  
        lineHeight: 1.5, //行高  
        textBackgroundColor: "#91A8D0", //文本背景顔色  
    }  
);  
canvas.add(text);

3.9 事件

fabric 中通過 on 方法來初始化事件，off 方法用來删除事件。常用的事件有以下

“mouse:down” 滑鼠被按下
“object:add” 對象被添加
“after:render” 渲染完成

還有一大堆:

滑鼠事件:“mouse:down” ,“mouse:move”和“mouse:up...” 選擇相關的事件：“before:selection:cleared”, “selection:created”, 詳細的可以檢視官方文檔

    canvas.clear();  
    let text = new fabric.Text("你點我啦~", {  
        left: 200,  
        top: 200,  
    });  
    canvas.add(text);  
    console.log(options.e.clientX, options.e.clientY);  
});  
canvas.on("mouse:up", function(options) {  
    this.text = "你沒點我0.0";  
    canvas.clear();  
    let text = new fabric.Text("你沒點我0.0", {  
        left: 200,  
        top: 200,  
    });  
    canvas.add(text);  
    console.log(options.e.clientX, options.e.clientY);  
});

rect.on("selected", function() {  
    console.log("哦吼~你選擇了我");  
});  

let circle = new fabric.Circle({ radius: 75, fill: "blue" });  
circle.on("selected", function() {  
    console.log("哈哈哈~你選擇了我");  
});

3.10自由繪畫

canvas.isDrawingMode = true;  
canvas.freeDrawingBrush.color = "blue";  
canvas.freeDrawingBrush.width = 5;

fabric.js

1.導語

2. 安裝

3. 使用

3.1 繪制一個簡單的圖形

3.2 繪制圖檔

3.3 通過自定義的路徑繪制

3.4 動畫

絕對動畫

相對動畫(第二個參數通過+=,-=等來決定動畫的最終效果)

定義動畫的動效函數

3.5 圖像濾鏡

單個濾鏡

疊加濾鏡

3.6 顔色

定義顔色

顔色轉換

3.7 漸變

3.8 文本

3.9 事件

3.10自由繪畫

4. 最後

繼續閱讀

羊了個羊的Ignite大會又來啦

1275.找出井字棋的獲勝者Java

【微信小程式】選擇寶——選擇困難症的拯救者

Windows 11 4K 高清桌面

Android--Selector、shape詳解（整理）

listview實作圓角

安卓自定義View----實作TextView可設定drawable寬高度前言drawable大小的實作原理自定義TextView----XXDrawableTextView 總結：

【React】1020- React useEffect 使用指南

CodeChef PRIMEDST Prime Distance On Tree

力扣每日一練之數組下篇Day3

RabbitMQ：消費端自定義監聽

HDU 5719 Arrange

@linux檢視使用者操作的記錄

HDU 4609 3-idiots

HDU 1402 A * B Problem Plus

數組和類數組