国产精品嫩草影院视频,免费午夜视频,欧美一级视频在线观看

Fabric.js介紹

admin

2023年5月23日 10:1 本文熱度 935

Fabric.js是什么

Fabric.js 是一個簡化HTML5 Canvas開發的Javascript庫，Fabric.js提供了HTML5 Canvas本身缺失的對象模型、交互層、SVG解析器以及其他一整套工具。它是一個完全開源的項目，在MIT下獲得授權，多年來一直在維護，近期要發布4.0版本，支持自定義controls。

Fabric.js能做什么

在Canvas畫布上創建、填充圖形（包括圖片、文字、規則圖形和復雜路徑組成圖形）。
給圖形填充漸變顏色。
組合圖形（包括組合圖形、圖形文字、圖片等）。
設置圖形動畫及用戶交互，生成的對象自帶拖拉拽功能。
JSON, SVG數據的序列化和反序列化。

為什么使用Fabric.js

HTML5 Canvas提供了完整的畫布，可以輕松的在畫布上繪制簡單的圖形、制作簡單的動畫，但是HTML5 Canvas提供的API過于低級，且操作基于上下文，因此在繪制復雜圖形或者需要實現用戶交互時，就顯得不是那么方便了。Fabric.js在HTML5 Canvas原生API之上，提供完整的對象模型，由Fabric.js來管理HTML5 Canvas畫布的狀態和渲染，用戶基于具體的對象，來編寫代碼，完成所需功能的開發（類似于面向過程和面向對象）。“Talk is cheap. Show me the code”，下面通過代碼來看看用HTML5 Canvas原生方法和用Fabric.js分別實現在畫布上畫一個矩形這一功能。

用HTML5 Canvas的原生方法實現

// 獲取canvas元素
var canvasEl = document.getElementById('c');
// 獲取上下文
var ctx = canvasEl.getContext('2d');
// 設置填充顏色
ctx.fillStyle = 'red';
// 在100,100點創建20x20的矩形
ctx.fillRect(100, 100, 20, 20);

在線演示地址：https://codepen.io/liblack/pen/LYpaMwa

用Fabric.js實現相同的功能：

// 創建原生canvas元素的包裝類（‘c’canvas元素的id）
var canvas = new fabric.Canvas('c');
// 創建一個矩形對象
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
// 添加矩形到畫布上
canvas.add(rect);

在線演示地址：https://codepen.io/liblack/pen/PoPLVwZ

由上面例子，可以看到使用HTML5 Canvas原生方法是對context（代表整個畫布位圖的對象）進行操作，而使用Fabric.js,我們是對對象操作，只需要去實例化對象，設置對象的屬性，然后將它們添加到canvas中。到這里，可能還感受不到Fabric對比原生Canvas方法的優勢，下面可以完成這樣的功能，即在剛才繪制的矩形的基礎上，將矩形位置移動到（10，10）點上。
這樣的功能，在Canvas原生方法上實現，需要先把原來的矩形從畫布上清除，然后在（10，10）位置重新繪制一個矩形，以此來實現矩形移動這樣的功能。

// 擦除之前的矩形（這里是擦除了整個canvas區域）
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
// 重新繪制矩形
ctx.fillRect(20, 50, 20, 20);

聽起來是不是很蹩腳？是的，使用Canvas原生方法時，就像是個帶橡皮檫的筆刷，在畫布上繪制圖形時，是筆刷在畫布上移動，繪制出的圖形就是筆刷移動的整個痕跡，而想把繪制好的圖形移動到其他地方，只好用橡皮檫擦掉，然后在新位置重新繪制。

相應的，使用Fabric.js實現該功能時，只需要改變矩形對象的屬性，然后重新刷新（渲染）畫布即可。

rect.set({ left: 20, top: 50 });
canvas.renderAll();

Canvas對象

fabric.Canvas作為元素的包裝器，創建fabric.Canvas對象如下：

var canvas = new fabric.Canvas('...')

它接收一個元素的id，并返回一個fabric.Canvas 的實例。fabric.Canvas對象，并不是DOM里的元素，如果需要直接控制DOM，或者對應的context，需要通過相應API去獲取。

var canvasElement = document.getElementById(canvasEle);
var ctx = canvasElement.getContext("2d");
fabric.Canvas對象負責管理畫布上繪制的所有對象，可以將對象添加到fabric.Canvas對象，也可以從fabric.Canvas獲取或刪除對象。
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // 添加對象
canvas.item(0); ///獲取之前添加的fabric.Rect(第一個對象)
canvas.getObjects(); ///獲取畫布上的所有對象(rect將是第一個也是唯一一個)
canvas.remove(rect); ///刪除之前添加的對象刪除

fabric.Canvas對象可以對畫布進行配置。比如需要為整個畫布設置背景顏色或圖像？需要將所有內容剪裁到特定區域？設置不同的寬度/高度？指定畫布是否是交互式的？所有這些選項（及其他）都可以在fabric.Canvas對象上進行設置，可以在創建時或之后進行設置。

var canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,100,200)',
  selectionColor：'blue',
  selectLineWidth: 2
  // ...
});
// 或
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://...');
canvas.onFpsupdate = function(){ /* ...... */ };
// ...

注意這種創建對象的形式，Fabric.js里基本上都是類似的，類名表示要創建的對象類型，第一個參數是必要的數據，第二個參數是各種選項。

所有對canvas的修改，包括在其中添加刪除對象，以及對象參數的修改，都需要調用渲染方法才能顯示出來：

canvas.renderAll();

Objects基本圖形
Fabric.js提供了7種基本圖形，下面是圖形對應的類：

fabric.Circle
fabric.Ellipse
fabric.Line
fabric.Polygon
fabric.Polyline
fabric.Rect
fabric.Triangle

所有基本形狀，都可以通過類實例的屬性頭椒ɡ純刂撲塹奈恢謾⒀丈⒋笮〉妊健Ｋ欣嘍技壇兇詅abric.Object類，有一些公共的屬性和方法。

創建

下面是畫線的例子(給出兩個頂點坐標)：

var line =  new fabric.Line([x1, y1, x2, y2], {
    strokeWidth: 2, //線寬
    stroke: rgba(255,0,0,0.8), //線的顏色
    selectable: false
});
canvas.add(line);

畫圓的例子(頂點和半徑是在選項里的),這里left和top其實就是(x,y)，應該是借用了css里的命名。

var circle =  new fabric.Circle({
    radius: 2,
    left: left,
    top: top,
    originX: 'center',
    originY: 'center',
    fill: rgba(0,200,0,0.8), 
    strokeWidth: 1,
    stroke: rgba(255,0,0,0.8),
    selectable: false
});
canvas.add(circle);

從這里可以看出，和創建canvas類似，第一個參數是這個類專用的（比如畫直線的時候傳的起止點坐標），第二個參數是通用選項，如果沒有專用參數，那么第一個參數就直接是通用選項。所有創建完的形狀，只有通過canvas.add方法加入，才能顯示出來。

控制

left和top是每種Object都有的屬性，至于它到底指圖形中哪一個點的坐標，由originX和originY這組參數決定，它們相當于文本編輯軟件里的對齊方式，originX有三種可選值：left,center, right；originY也有三種可選值：top, center, bottom。

它們的示意圖如下：
http://fabricjs.com/test/misc/origin.html

如果希望對象的默認原點在中心，可以這樣設置：

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'

width和height也是可以直接存取的屬性，顧名思義，表示長和寬（所有形狀都是有外接矩形的，所以可以用長和寬來控制大小）。除了上面那幾個可以直接存取的屬性，大部分屬性需要使用get/set方法讀寫，比如：

line.left = pointer.x;
line.top = pointer.y;
line.set('stroke', startColor);
line.set('height', 20);

Image對象

Image跟其他形狀類似，都是fabric.Object的子類，最大的區別在于，圖像文件的加載是異步的，所以對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);
});

Path對象

在Fabric.js中的Path代表了一個形狀的輪廓，它可以被填充、描邊和修改。Path由一系列的命令組成，本質上是模仿一支筆從一個點到另一個點。在“move”, “line”, “curve”, or “arc”等命令的幫助下，Path可以形成非常復雜的形狀。而在Paths（PathGroup’s）組的幫助下，Path的能實現更多的復雜圖形。
Fabric.js中的Path與SVG的元素非常相似。它們使用相同的命令集，可以從元素中創建，并將其序列化。我們稍后會更深入地研究序列化和SVG解析，但現在值得一提的是，實踐中很少會手動創建Path實例。相反，更多的是使用Fabric.js的內置SVG解析器。
手工創建一個簡單的Path對象。

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 “代表 “移動 “指令，告訴隱形筆要移動到0，0點。”L “代表 “線”，讓筆畫一條線到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);

實踐中，更多是直接使用fabric.loadSVGfromString 或 fabric.loadSVGfromURL 方法來加載整個 SVG 文件，然后讓 Fabric 的 SVG 解析器來完成所有 SVG 元素的解析工作，并創建相應的 Path 對象。

Events事件

事件驅動的架構是一個框架靈活性和可擴展性的基礎。Fabric.js提供了一個廣泛的事件系統，覆蓋了低級的 “鼠標”事件到高級的對象事件。
這些事件使我們能夠監控到到畫布上發生的各種動作的不同時刻。比如想知道鼠標被按下的時間，只需監聽”mouse:down”事件就可以了。想知道對象何時被添加到畫布上，只需要監聽”object:added “事件就在那里。

事件API非常簡單，類似于jQuery、Underscore.js或其他流行的JS庫。有on方法來初始化事件監聽器，有off方法來移除事件監聽器。

下面一個實際的例子。

var canvas = new fabric.Canvas('...');
canvas.on('mouse:down', function(options) {
  console.log(options.e.clientX, options.e.clientY);
});

上面例子演示了在canvas上添加”mouse:down”事件監聽器，并給它設置事件處理程序，它將記錄事件發生的坐標。事件處理程序會接收一個選項對象，它有兩個屬性：e—原始事件，和target—畫布上的點擊對象（如果有的話）。該事件在任何時候都是存在的，但目標只有在實際點擊了畫布上的某個對象后才會存在。target也只有在有意義的情況下才會傳遞給事件的處理程序，例如，對于 “mouse:down”事件，但對于 “after:render”事件（表示整個畫布被重新繪制），target不會傳遞給事件處理程序。

canvas.on('mouse:down', function(options) {
  if (options.target) {
    console.log('一個對象被點擊了!', options.target.type);
  }
});

如果你點擊了一個對象，上面的例子會輸出 “一個對象被點擊了！”。還會顯示被點擊的對象類型。

那么，在Fabric.js中還有鼠標級的事件：“mouse:down”, “mouse:move”, 和”mouse:up”。通用的事件： “after:render”。選擇相關的事件： “before:selection:cleared”，”selection:create”，”selection:cleared”。對象相關的事件： “object:moded”、”object:selected”、”object:moving”、”object:scaling”、”object:rotating”、”object:additional “和 “object:detter”。
注意，像”object:moving”（或”object:scaling”）這樣的事件在每次對象移動（或縮放）時，即使是一個像素點的移動，也會連續地被觸發。另一方面，像 “object:modified” 或 “selection:create”這樣的事件只在操作（對象修改或選區創建）結束時才會被觸發。如果將事件直接附加到畫布上的（canvas.on(‘mouse:down’, …)），這意味著事件被覆蓋到了canvas實例上。如果一個頁面上有多個畫布，可以給每個畫布附加不同的事件監聽器。它們都是獨立互不影響的。
為了方便，Fabric.js將事件系統做得更進一步，允許直接將監聽器附加到具體對象上。如下例子。

var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('elected', function() {
  console.log('選擇了一個矩形');
});
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
  console.log('選擇了一個圓圈');
});

上述例子直接給矩形和圓的實例附加事件監聽器，使用的是 “selected “事件，而不是 “object:selected”。同樣的，可以在對象上使用 “modified”事件（當附加到canvas上時使用 “object:modified”）、”rotating”事件（當附加到canvas時使用 “object:rotating”）等等。

Groups組

fabric.Group是Fabric.js提供的強大的功能之一。使用Groups可以將任何Fabric對象組合成一個單一實體，這樣就能夠將這些對象作為一個單一的單元來處理。用鼠標將畫布上的任意數量的Fabric對象進行組合，一旦組合后，這些對象都可以一起移動甚至修改。它們組成了一個組。我們可以對該組進行縮放、旋轉，甚至改變其呈現屬性—顏色、透明度、邊框等。

下面創建一個由2個對象組成的組，即圓圈和文本。

var circle = new fabric.Circle({
  radius: 100,
  fill: '#eef',
  scaleY: 0.5,
  originX: 'center',
  originY: 'center'
});
var text = new fabric.Text('hello world', {
  fontSize: 30,
  originX: 'center',
  originY: 'center'
});
var group = new fabric.Group([ circle, text ], {
  left: 150,
  top: 100,
  angle: -10
});
canvas.add(group);

組成組以后，依舊可以對每個對象操作，改變對象的屬性和狀態。

group.item(0).set('fill', 'red');
group.item(1).set({
  text: 'trololo',
  fill: 'white'
});

Serialization序列化

為構建某種有狀態的應用程序，允許用戶將canvas內容的結果保存在服務器上，或者將內容流媒體化到不同的客戶端。Fabric.js提供了canvas序列化/解序列化支持。

toObject, toJSON

Fabric中序列化的主要方法是 fabric.Canvas#toObject()和 fabric.Canvas#toJSON()方法。讓我們來看一個簡單的例子，首先對一個空畫布進行序列化。

var canvas = new fabric.Canvas('c');
JSON.stringify(canvas); // '{"objects":[], "background": "rgba(0,0,0,0,0)"}'

使用的是ES5 JSON.stringify()方法，如果傳入的對象存在toJSON方法，那么這個方法就會隱含地調用toJSON方法。由于Fabric中的canvas實例有toJSON方法，所以調用JSON.stringify(canvas)方法和調用JSON.stringify(canvas.toJSON())一樣。

注意，返回的字符串表示空的canvas。它是JSON格式的，本質上由 “objects”和”background”屬性組成。”objects”目前是空的，因為canvas上沒有任何東西，而 background 有一個默認的透明值(“rgba(0，0，0，0，0)”)。
當在canvas上添加了具體對象后：

canvas.add(new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
}));
console.log(JSON.stringify(canvas));

序列化后結果如下：

'{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,
"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,
"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red",
"overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,
"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'

toSvg

Fabric.js支持將canvas畫布序列化為SVG格式的文本。

canvas.add(new fabric.Rect({
  left: 50,
  top: 50,
  height: 20,
  width: 20,
  fill: 'green'
}));
console.log(canvas.toSVG());

序列化結果如下：

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve">
<desc>created with Fabric.js 0.9.21</desc>
<rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" />
</svg>

Deserialization反序列化, SVG Parser SVG解析器

與序列化類似，反序列化是從字符串中加載canvas，與序列化時相對應的，也有兩種方法：從JSON文本反序列和從SVG文本反序列化。當使用JSON表示時，有 fabric.Canvas#loadfromJSON和 fabric.Canvas#loadfromDatalessJSON方法。當使用SVG時，

有 fabric.loadSVGfromURL和 fabric.loadSVGfromString兩個方法。

var canvas = new fabric.Canvas();
canvas.loadfromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,
"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,
"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,
"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,
"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}');

下移：canvas.sendBackwards(obj)
上移：canvas.bringForward(obj)
置頂：canvas.bringToFront(obj)
置底：canvas.sendToBack(obj)

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv