整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
canvas
Fabric.js是一個簡單但功能強大的Javascript HTML5 canvas庫，Fabric在canvas元素之上提供交互式對象模型，而且Fabric還內置SVG-to-canvas（和canvas-to-SVG）解析器，在Github上star數超過13k+，可見其受歡迎程度！
1、使用Fabric.js，您可以在畫布上創建和填充對象;對象就像簡單的幾何形狀
2、或由數百或數千條簡單路徑組成的復雜形狀
3、或者舊風格的圖像
4、任何形狀的漸變
5、您可以添加文本并動態操作其大小，對齊方式，字體系列和其他屬性
6、將圖像過濾器應用于圖像
7、有內置的動畫支持
8、拖動圖像，可以將對象組合在一起，并同時對其進行操作
9、拖拽方法和方向旋轉
10、Canvas可以序列化為JSON或SVG，并可以隨時恢復
12、使用免費繪圖來創建任何你喜歡的東西
既然是開源項目，那么當然可以到Github上獲取相關代碼，其一直保持更新維護并繼續增強其功能，同時官網還提供了非常詳細的文檔，以及非常豐富的Demo，下面我們將進行截圖預覽！
相信用過截圖工具或者windows繪圖工具的都知道什么效果
以上是選取一些案例進行演示，可能效果不佳，感興趣的小伙伴可以去官網看看Demo
其兼容性相當的不錯
npm install fabric --save
這里就大致看下文檔具備哪些內容，由于文檔很詳細，就不在細說，而且借助瀏覽器翻譯，看懂是完全沒問題的
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="lib/fabric.js"></script>
<script>
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
canvas.add(rect);
</script>
</body>
</html>
官方文檔提供了非常人性化的一個地方就是你可以選擇你需要的部分進行構建
總體來說Fabric.js是一個非常值得使用的JavaScript庫，不管是功能還是兼容性都是非常優秀的，而且你可以使用它來構建非常強大的BS端應用。如在線繪圖等，如果你對它感興趣，不放嘗試一下，不會讓你失望！
上文：開源Html5畫布操作類庫Fabric.js基礎入門——第一部分（中）
畫布
現在，我們已經詳細的介紹了對象，讓我們再回頭聊聊畫布。
在所有的創建畫布對象的Fabric實例中，你看到的第一件事情是--new fabric.Canvas('...')。fabric.Canvas作為<canvas>元素的包裝，負責管理畫布上所有的fabric對象。它需要一個元素的ID，并返回一個fabric.Canvas實例。
我們可以在它上面添加對象，引用它們，或者刪除它們：
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
canvas.remove(rect); // remove previously-added fabric.Rect
fabric.Canvas的主要工作是管理對象，它同時也作為配置宿主。需要為整個畫布設置背景色或者圖像？剪切所有內容到一個確定的區域？設置不同的寬度/高度？確定畫布是否支持交互？所有這些選項（包括其他的）可以在fabric.Canvas上設置，不管是在創建時還是創建后：
var canvas = new fabric.Canvas('c', {
backgroundColor: 'rgb(100,100,200)',
selectionColor: 'blue',
selectionLineWidth: 2
// ...
});
// or
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://...');
canvas.onFpsUpdate = function(){ /* ... */ };
// ...
交互
在我們討論畫布元素的時候，我們來談談交互性。Fabric的一個獨特的特點--還是內置的--是在我們剛看到的所有方便的對象模型之上的交互層。
對象模型存在的意義是允許編程訪問和操作畫布上的對象。但是在外部，在用戶級別上，有一種通過鼠標（或觸摸，通過觸摸設備）操作這些對象的途徑。只要你一通過new fabric.Canvas('...')初始化畫布，就可以選擇對象、拖拽它們、縮放或者旋轉，甚至把他們分組到一個塊中。
如果我們需要允許用戶在畫布拖放--比如說圖像--我們需要做的就是初始化畫布，并且添加一個對象到它上面，不需要額外的配置或設置。
對交互的控制，可以通過組合 Fabric畫布的布爾屬性“selection”和每個獨立對象的布爾屬性“selectable”實現：
var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable
如果你一點都不需要交互層，你可以使用fabric.StaticCanvas代替fabric.Canvas。初始化語法是完全相同的，只需要使用StaticCanvas替代Canvas即可：
var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
new fabric.Rect({
width: 10, height: 20,
left: 100, top: 100,
fill: 'yellow',
angle: 30
}));
這將創建一個輕量級版本的畫布，不包括任何事件處理邏輯。要明白，你仍然具有可操作的完全對象模型--添加、刪除、修改對象，改變任何畫布設置--所有這些仍然可用，只是事件處理沒有了。
稍后，當我們研究自定義構建選項時，如果StaticCanvas滿足你的所有要求，你甚至可用創建一個輕量級版本的Fabric。如果你的應用程序需要非交互的圖表或者非交互的圖像，這是一個很好的選擇。
圖片
說說圖片...
在畫布上添加矩形和畫圈圈有點意思，但是為什么不試試圖片呢？如你所想，Fabric把這變的很簡單。讓我們實例化fabric.Image對象，并添加到畫布：
(html)
<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">
(js)
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
注意我們是如何傳遞圖像元素給fabric.Image構造函數的。這將創建一個看起來像文檔中圖片的fabric.Image實例。此外，我們立刻設置left/top 值為100/100，angle為30，opacity 為 0.85。一旦我們把它添加到畫布，在100，100位置，一幅圖片以30度角稍微透明的顯示出來了，還不錯。
假如現在我們在文檔里沒有一個真實的圖片，只有一個圖片的URL怎么辦？沒問題，我們看看如何使用fabric.Image.fromURL:
fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});
看起來NB極了，不是嗎？只需要使用圖片URL來調用fabric.Image.fromURL，然后給它一個當圖片加載創建完成后的回調。回調函數接收已經創建好的fabric.Image對象，并把它當作第一個參數。這時，你可以把它加到畫布，或者先處理一下再加到畫布：
fabric.Image.fromURL('my_image.png', function(oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(0.5).set('flipX, true);
canvas.add(oImg);
});
路徑
我們已經看過了簡單的形狀，然后是圖像。那么更復雜、更豐富的形狀和內容呢？
超級CP了解下--Path and Groups（路徑和分組）
在Fabric里，路徑表示形狀的輪廓，可以被填充、描邊或以其他方式修改。路徑是一系列命令的組合，本質上是模仿畫筆從一個點到另一個點。在諸如“移動”、“劃線”、“曲線”、“圓弧”等這些命令的協助下，路徑可以形成難以置信的復雜形狀，在路徑組的協助下，這種可能性更大了。
在Fabric中，路徑很像SVG中的<path>元素，它們使用相同的命令集，它們可以從<path>元素創建，并序列化。稍后我們將更仔細地研究序列化和SVG解析，但現在值得一提的是，您可能很少手工創建路徑實例，而是使用Fabric內置的SVG解析器。不過為了更好的理解路徑對象是什么，我們試著手工創建一個簡單的對象：
var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);
我們在實例化fabric.Path對象，傳統一個路徑指令串，雖然它看起來挺神秘的，實際比較容易理解。“M”代表“Move”命令，它指示不看見的畫布移動到0，0點；“L”代表“line”，讓畫筆畫條線到200，100點，然后另一個“L”劃線到170，200點，最后，“z”指示畫筆關閉路徑并且完成形狀。因此，我們得到了三角形的形狀。
既然fabric.Path像Fabric中其他對象一樣，我們也可以改變它的屬性，而且我們可以做的更多：
...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);
出于好奇，咱們看看一個有點復雜的路徑語法，你就會明白為什么手工創建路徑不是個好主意：
...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));
那么，伙計，這里發生了什么?
好，“M”仍然代表“move”命令，因此畫筆從點 “121.32, 0”開始它的旅程，然后“L”命令劃線到“44.58, 0”，一切還好。下一步呢？“C”命令代表“cubic bezier”（三次貝塞爾曲線），它讓畫筆從當前點畫貝塞爾曲線到“36.67, 0”，使用點“29.5, 3.22” 作為起始線的控制點， “24.31, 8.41” 作為終止線的控制點，然后，再加上十幾個其他三次貝塞爾命令，最終形成一個漂亮的箭頭形狀。
很有可能，你不會直接和這樣的“怪獸”一起工作，取而代之的，你可以使用類似 fabric.loadSVGFromString或fabric.loadSVGFromURL方法加載整個SVG文件，然后讓 Fabric的SVG解析器處理所有的SVG元素并且創建相應的路徑對象。
說起整個SVG文檔，Fabric的路徑經常取代SVG的路徑元素，SVG文檔中經常出現的一組路徑，被取代為Groups (fabric.Group實例)。你可以想象，Group只是一組路徑和其他對象而已。既然fabric.Group繼承自fabric.Object，它也可以像其他對象一樣被加入到畫布中，并且使用類似的方式操作。
就像路徑一樣，你也基本不會直接操作組對象，但是如果你在解析SVG文檔后偶然發現它，你就會知道它到底是什么，它服務的目的是什么。
后記
我們只是表面上了解了Fabric，你現在可以很容易的創建任何簡單的圖形、復雜的圖形、圖像；把它們加入畫布，使用任何方式修改你需要的屬性--positions, dimensions, angles, colors, strokes, opacity--只要你叫的上名字。
這一系列的下一部分，我們將研究使用組、動畫、文本、SVG解析器、渲染、序列化、事件、圖像過濾器，等等。
同時，請隨意查看帶注釋的演示（這里是演示超鏈接），性能測試（這里是性能測試超鏈接），加入谷歌或其他討論組，或者直接查看文檔、wiki和源代碼。
祝你在Fabric玩的愉快，希望你能享受這個旅程。
第二部分未完待續
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
