fabric.js使用指南
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
1.導語我們想在畫布上畫個基本的簡單形狀的時候，使用 Canvas 不會覺得有什么繁瑣。但當畫布上需要任何形式的互動，繪制復雜的圖形和在特定情況需要改變圖片的時候，使用原生 canvas API 將會變得很困難。而 Fabric 旨在解決這個問題。
為了方便，下面我將通過 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 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: 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 通過自定義的路徑繪制在此之前我們需要了解幾個參數的含義
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 動畫第一個參數是動畫的屬性，第二個參數是動畫的最終位置，第三個參數是一個可選的對象，指定動畫的細節：持續時間，回調，動效等。
絕對動畫let rect = new fabric.Rect({ left: 400, //距離左邊的距離 top: 200, //距離上邊的距離 fill: "green", //填充的顏色 width: 200, //寬度 height: 200, //高度 }); rect.animate( 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, }); [object Object] 定義動畫的動效函數默認情況下，動畫使用“easeInSine”動效執行。如果這不是你需要的，fabric 為我們提供了很多內置動畫效果, fabric.util.ease 下有一大堆動效的選項。 onChange: canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutBounce,
}); [object Object] 3.5 圖像濾鏡目前 Fabric 為我們提供了以下內置濾鏡
單個濾鏡 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);
}); [object Object] 疊加濾鏡
img.scale(0.5); // 添加濾鏡 img.filters.push( new fabric.Image.filters.Grayscale(), 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 顏色
定義顏色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. 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 更豐富的功能，包括：
"大家好~這里是前埔寨\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); ); canvas.add(text);
3.9 事件fabric 中通過 on 方法來初始化事件，off 方法用來刪除事件。常用的事件有以下：
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 畫布中的對象上。 rect.on("selected", function() {
console.log("哦吼~你選擇了我");
}); let circle = new fabric.Circle({ radius: 75, fill: "blue" });
circle.on("selected", function() {
console.log("哈哈哈~你選擇了我");
}); 3.10自由繪畫Fabric canvas 的 isDrawingMode 屬性設置為 true 即可實現自由繪制模式. canvas.isDrawingMode = true;canvas.freeDrawingBrush.color = "blue";canvas.freeDrawingBrush.width = 5;
4. 最后很開心寫下這篇文章，它是我用來總結歸納 fabric 的知識點，并且非常用心的一篇文章，希望這篇文章對你有所幫助。目前 fabric 在國內還不是很火,但是 github 上已經有 19.2k 的 star 了,也算是一個明星項目。我們日常開發經常會用到 canvas，但是它的 api 對于處理復雜的業務邏輯會令人感到非常的勞累，分享這篇文章，希望對大家有所幫助！ 該文章在 2023/5/23 12:26:31 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
