資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 更改 IText 物件的 URL 字串格式？
在本教程中，我們將學習如何使用 FabricJS 更改 IText 物件的 URL 字串格式。IText 類在 FabricJS 1.4 版中引入，擴充套件了 fabric.Text，用於建立 IText 例項。IText 例項使我們可以自由地選擇、剪下、貼上或新增新文字，無需額外配置。還支援各種按鍵組合和滑鼠/觸控組合，使文字具有互動性，而 Text 則沒有提供這些功能。
但是，基於 IText 的文字框允許我們調整文字矩形的大小並自動換行。這對於 IText 來說並不適用，因為高度不會根據換行進行調整。我們可以使用各種屬性來操作 IText 物件。同樣，我們可以使用 format 屬性來更改 IText 物件的 URL 字串格式。
語法
toDataURL({ format: String }: Object): String
引數
options (可選) − 此引數是一個物件，它為 IText 物件的 URL 表示提供額外的自定義。使用此引數，可以更改高度、質量、乘數以及許多其他屬性，其中 format 是一個屬性。
選項鍵
format − 此屬性接受一個字串值，允許我們定義輸出影像的格式。接受的值為“jpeg”或“png”。預設值為“png”。
示例 1
不使用 format 屬性時的預設值
讓我們來看一個程式碼示例，看看在不使用 format 屬性的情況下使用 toDataURL 方法時的日誌輸出。一旦我們從開發者工具中開啟控制檯，我們就可以看到 IText 物件的 URL 表示。我們可以複製該 URL 並將其貼上到新標籤頁的位址列中以檢視最終輸出。由於我們沒有指定影像的格式，它將根據設定的預設值“png”顯示。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default value without using the format property</h2> <p> You can open console from dev tools and see that the URL representation of the IText object has a "png" format by default </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a shadow object var shadow = new fabric.Shadow({ blur: 25, color: "grey", offsetX: 12, offsetY: 15, }); // Initiate an itext object var itext = new fabric.IText( "Add sample text here.
Lorem ipsum dolor sit amet
consectetur adipiscing.",{ width: 300, left: 60, top: 70, fill: "#c70039", backgroundColor: "#c1dfed", stroke: "#c70039", originX: "center", shadow: shadow, } ); // Add it to the canvas canvas.add(itext); // Using the toDataURL method console.log(itext.toDataURL()); </script> </body> </html>
示例 2
結合使用 toDataURL 方法和 format 屬性
讓我們來看一個程式碼示例，看看在結合使用 toDataURL 方法和 format 屬性時 IText 物件是什麼樣的。在這種情況下，我們將能夠指定最終影像的格式。由於這裡分配的值為“jpeg”，因此最終影像將為“jpeg”格式。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the toDataURL method along with format property</h2> <p> You can open console from dev tools and see that the URL representation of the IText object has a "jpeg" format now </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a shadow object var shadow = new fabric.Shadow({ blur: 25, color: "grey", offsetX: 12, offsetY: 15, }); // Initiate an itext object var itext = new fabric.IText( "Add sample text here.
Lorem ipsum dolor sit amet
consectetur adipiscing.",{ width: 300, left: 60, top: 70, fill: "#c70039", backgroundColor: "#c1dfed", stroke: "#c70039", originX: "center", shadow: shadow, } ); // Add it to the canvas canvas.add(itext); // Using the toDataURL method console.log(itext.toDataURL({format: "jpeg"})); </script> </body> </html>
瀏覽量 125
