在本教學中,我們將學習如何使用 FabricJS 來變更 IText 物件的 URL 字串的格式。 IText 類別是在 FabricJS 版本 1.4 中引入的,它擴展了 Fabric.Text 並用於建立 IText 實例。 IText 實例使我們可以自由選擇、剪下、貼上或新增文本,而無需額外配置。還有各種支援的按鍵組合和滑鼠/觸控組合使文字具有互動性,而 Text 中未提供這些組合。
然而,基於 IText 的 Textbox 允許我們調整文字矩形的大小並自動換行。對於 IText 來說並非如此,因為高度不會根據換行進行調整。我們可以透過使用各種屬性來操作 IText 物件。同樣,我們可以使用 format 屬性來更改 IText 物件的 URL 字串的格式。
toDataURL({ format: String }: Object): String
options(可選) - 此參數是一個對象,它為 IText 物件的 URL 表示形式提供額外的自訂。使用此參數可以更改高度、質量、乘數和許多其他屬性,其中格式是屬性
format - 這個屬性接受一個String值,它允許我們定義輸出映像的格式。接受的值為“jpeg”或“png”。預設值為“png”。
不使用格式屬性的預設值
讓我們看一個程式碼範例,以查看使用 toDataURL 方法而不使用 format 屬性時記錄的輸出。一旦我們從開發工具開啟控制台,我們就可以看到 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>
使用 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>
以上是如何使用FabricJS更改IText物件的URL字串的格式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!