資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在使用 FabricJS 時，透過 URL 字串設定 IText 物件的質量級別？
在本教程中，我們將學習如何在使用 FabricJS 時，透過 URL 字串設定 IText 物件的質量級別。IText 類在 FabricJS 1.4 版本中引入，它擴充套件了 fabric.Text 並用於建立 IText 例項。IText 例項使我們能夠在無需額外配置的情況下選擇、剪下、貼上或新增新文字。它還支援各種快捷鍵和滑鼠/觸控組合，使文字具有互動性，而 Text 類則不提供這些功能。
然而，基於 IText 的文字框允許我們調整文字矩形的尺寸並自動換行。這對於 IText 來說並不適用，因為高度不會根據換行而調整。我們可以使用各種屬性來操作 IText 物件。同樣，我們可以使用 `quality` 屬性來設定 IText 物件的 URL 字串中的質量級別。
語法
toDataURL({ quality: Number }: Object): String
引數
options (可選) − 此引數是一個物件，它為 IText 物件的 URL 表示提供額外的自定義選項。使用此引數可以更改高度、質量、格式以及許多其他屬性，其中 `quality` 是一個屬性。
選項鍵
quality − 此屬性接受一個數字值，表示最終輸出影像的質量級別。可接受的值介於 0 和 1 之間，不包括 0。0.1 表示最低質量，1 表示最高質量。此屬性僅可用於 jpeg 格式。預設值為 1。
示例 1
不使用 quality 屬性
讓我們來看一個程式碼示例，看看不使用 quality 屬性時輸出影像是什麼樣的。開啟開發者工具中的控制檯後，我們可以看到 IText 物件的 URL 表示。我們可以複製該 URL 並將其貼上到新標籤頁的位址列中以檢視最終輸出。由於我們沒有使用 quality 屬性，因此將使用預設值 1。
<!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>Without using the quality property</h2> <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </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: 310, 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>
示例 2
使用 quality 屬性
讓我們來看一個程式碼示例，看看使用 quality 屬性時 IText 物件的最終輸出影像是什麼樣的。在這種情況下，我們將其值設定為 0.1。因此，最終影像的質量將變為最低。
<!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 quality property</h2> <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </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: 310, 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", quality: 0.1 })); </script> </body> </html>
231 次瀏覽
