每個用到canvas的小夥伴都應該瞭解的fabric.js

這是我參與8月更文挑戰的第2天，活動詳情查看： 8月更文挑戰javascript

導語

咱們想在畫布上畫個條基本的簡單形狀的時候，使用 Canvas 不會以爲有什麼繁瑣。但當畫布上須要任何形式的互動，繪製複雜的圖形和在特定狀況須要改變圖片的時候,使用原生 canvas API 將會變得很困難。
而 Fabric 旨在解決這個問題。html

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

爲了方便,下面我將經過 vue項目 爲你們講解如何使用 Fabric
複製代碼

1、安裝

yarn add fabric -S
#or
npm i fabric -S
複製代碼

也能夠在官網下載最新 js 文件,經過 script 標籤引入java

2、使用

<!-- html -->
<canvas id="canvas" width="500" height="500"></canvas>
複製代碼

2.1 繪製一個簡單的圖形

Fabric 提供了 7 種基礎形狀：git

fabric.Circle (圓)

fabric.Ellipse (橢圓)

fabric.Line (線)

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

fabric.triangle (三角形)

fabric.Rect (矩形)

fabric.Polygon (多邊形)

矩形

// js

//引入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);
複製代碼

能夠看到界面中填充了一個能夠經過鼠標放大縮小且能夠旋轉的綠色矩形
經過對象的形式配置元素樣式,很是的方便!github

圓形和三角形

// 建立一個圓形對象
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);
複製代碼

咱們能夠經過如下屬性設置,決定是否能夠對相關元素進行交互ajax

canvas.selection = false; // 禁止全部選中
rect.set("selectable", false); // 只是禁止這個矩形選中
複製代碼

2.2 繪製圖片

主要有經過 url 和 img 標籤繪製兩種方式redis

//經過url繪製圖片
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);
複製代碼

2.3 經過自定義的路徑繪製

在此以前咱們須要瞭解幾個參數的含義npm

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

let customPath = new fabric.Path("M 0 0 L 300 100 L 170 100 z");
customPath.set({
    left: 100,
    top: 100,
    fill: "green",
});
canvas.add(customPath);
複製代碼

let customPath = new fabric.Path(
    "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 復原圖形)canvas

2.4 動畫

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

第三個參數主要有

duration 默認爲 500ms。能夠用來改變更畫的持續時間。

from 容許指定動畫屬性的起始值（若是咱們不但願使用當前值）。

onComplete 動畫結束以後的回調。

easing 動效函數。

2.41 絕對動畫

let canvas = new fabric.Canvas("canvas");
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);
複製代碼

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

rect.animate("left", "+=100", {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
});
複製代碼

rect.set({ angle: 45 });
rect.animate("angle", "-=90", {
onChange: canvas.renderAll.bind(canvas),
duration: 2000,
});
複製代碼

2.43 定義動畫的動效函數

默認狀況下，動畫使用「easeInSine」動效執行。若是這不是你須要的，fabric 爲咱們提供了不少內置動畫效果, fabric.util.ease 下有一大堆動效的選項。
經常使用的有easeOutBounce,easeInCubic，easeOutCubic，easeInElastic，easeOutElastic，easeInBounce 和 easeOutExpo等

rect.animate("left", 100, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
    easing: fabric.util.ease.easeOutBounce,
});
複製代碼

2.5 圖像濾鏡

目前 Fabric 爲咱們提供瞭如下內置濾鏡

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

2.51 單個濾鏡

fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {
    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);
});
複製代碼

2.52 疊加濾鏡

「filters」屬性是一個數組，咱們能夠用數組方法執行任何所需的操做：移除濾鏡（pop，splice，shift），添加濾鏡（push，unshift，splice），甚至能夠組合多個濾鏡。當咱們調用 applyFilters 時，「filters」數組中存在的任何濾鏡將逐個應用，因此讓咱們嘗試建立一個既色偏又明亮（Brightness）的圖像。

fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {
    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 高級篇,感謝你們的支持~

2.6 顏色

不管你是使用十六進制，RGB 或 RGBA 顏色，Fabric 都能處理的很好

2.61 定義顏色

new fabric.Color("#f55");
new fabric.Color("#aa3123");
new fabric.Color("356333");
new fabric.Color("rgb(100,50,100)");
new fabric.Color("rgba(100, 200, 30, 0.5)");
複製代碼

2.62 顏色轉換

new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"
複製代碼

咱們還能夠用另外一種顏色疊加，或將其轉換爲灰度版本。

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

2.7 漸變

Fabric 經過 setGradient 方法支持漸變，在全部對象上定義。調用 setGradient('fill', { ... })就像設置一個對象的「fill」值同樣。

let circle = new fabric.Circle({
  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"
    },
});
複製代碼

2.8 文本

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

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

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

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

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

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

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

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

多字節 Multibyte 支持表情符號。

交互式畫布編輯 On canvas editing 能夠直接在畫布上鍵入文本。

let text = new fabric.Text(
    "你們好~這裏是前埔寨\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);
複製代碼

2.9 事件

fabric 中經過 on 方法來初始化事件，off 方法用來刪除事件。

經常使用的事件有如下

「mouse:down」鼠標被按下
「object:add」對象被添加
「after:render」渲染完成

還有一大堆:
鼠標事件:「mouse:down」 ,「mouse:move」和「mouse:up...」選擇相關的事件：「before:selection:cleared」, 「selection:created」, 詳細的能夠查看官方文檔

canvas.on("mouse:down", function(options) {
    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);
});
複製代碼

Fabric 容許將偵聽器直接附加到 canvas 畫布中的對象上。

let rect = new fabric.Rect({ width: 100, height: 50, fill: "green" });
rect.on("selected", function() {
    console.log("哦吼~你選擇了我");
});

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

3.0 自由繪畫

Fabric canvas 的 isDrawingMode 屬性設置爲 true 便可實現自由繪製模式.
這樣畫布上的點擊和移動就會被馬上解釋爲鉛筆或刷子。

let canvas = new fabric.Canvas("canvas");
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "blue";
canvas.freeDrawingBrush.width = 5;
複製代碼

3、最後

很開心寫下這篇文章,它是我用來總結概括 fabric 的知識點而且很是用心的一篇文章,但願這篇文章對你有所幫助,目前 fabric 在國內還不是很火,可是 github 上已經有 19.2k 的 star 了,也算是一個明星項目.咱們平常開發常常會用到 canvas,可是它的 api 對於處理複雜的業務邏輯會使人感到很是的勞累,因此我分享這篇文章,但願對你們有所幫助,點贊超過 500 我會更新 fabric.js 高級篇,感謝你的支持!

很高興能夠和你們一塊兒變強！關注個人公衆號，前埔寨。我是榮頂，和我一塊兒在鍵帽和字符上橫跳，在代碼與程序中穿梭。🤞