Fabric.js：高級

本文深入研究高級織物。

密鑰概念：

>
• 織物組：有效地將多個對像作為一個單元管理，簡化操作（移動，縮放，旋轉）。 >
帆布序列化（JSON）：
• 使用JSON保存和加載帆布狀態，比圖像格式更具帶寬友好的方法。
自定義類創建：
• 擴展了具有定制的對象行為和屬性的織物。 svg互操作性：
導出帆布元素向SVG，並將SVG內容導入帆布以獲得格式的靈活性。
• 進行序列化方法：用於無縫的帆布狀態恢復。
• >高級對象控制：通過子類別創建複雜的交互式元素和高度自定義的對象。 loadFromJSONloadFromSVG組：
• Fabric.js中的組允許將對象組合到一個實體中。 （見圖1）。 可以分組任意數量的帆布對象，從而實現統一的操作。 可以進行縮放，旋轉和修改組屬性（顏色，透明，邊界）。 織物在選擇多個對象時隱含地創建組。

圖1

編程組創建：

（結果見圖2）。 使用>方法訪問組中的單個對象。

圖2

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

修改組對象：

item

（見圖3）。除非指定坐標，否則組內的對像是相對於組中心的位置。 圖3

創建一個水平對齊的組：

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

>

left（見圖4）。 對於包含圖像的組，請確保在分組之前將圖像充分加載。 top>

圖4

組方法包括

，

，

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

，

，

，

，和。 在更新組尺寸時添加對象。 克隆現有的畫布對像是必須在將它們添加到新組之前。

序列化：getObjectssize>

babric.js使用toObject>和toJSON進行序列化。 toJSON隱式調用toObject。

>

>示例：序列化一個空畫布：

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

添加對象更新JSON表示。 toObject>返回非弦樂對象表示。 自定義對象序列化是通過覆蓋或擴展toObject方法來實現的。

>示例：擴展

： toObject SVG序列化使用

>方法，將其委派給單個對象的

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

方法。 這允許導出到任何SVG兼容的渲染器。

> toSVG toSVG避難所：

> JSON的>和>

加載帆布狀態。

和loadFromJSON從SVG數據加載。 loadFromDatalessJSON>通過引用外部SVG文件有效地處理大型路徑數據。 loadSVGFromURLloadSVGFromString>子類別：loadFromDatalessJSON

> babric.js利用

進行子類。 屬性充當構造函數。 調用父類方法。

>示例：創建一個自定義類：fabric.util.createClass initialize callSuper（有關

的示例，請參見圖8和9）。 自定義屬性應在

>和

>中處理。

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

>

>LabeledRect常見問題（常見問題解答）：toObject（所提供的常見問題解答已經結構良好且全面，因此這裡不需要更改。）initialize>

根據要求包含圖像，維護其原始格式和文本中的位置。

以上是Fabric.js：高級的詳細內容。更多資訊請關注PHP中文網其他相關文章！