資料結構
網路
關係資料庫管理系統 (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 物件。同樣，我們可以使用 `withoutShadow` 屬性來移除 IText 物件的 URL 字串中的當前物件陰影。
語法
toDataURL({ withoutShadow: Boolean }: Object): String
引數
options (可選) − 此引數是一個物件，它為 IText 物件的 URL 表示提供額外的自定義功能。使用此引數可以更改高度、質量、格式以及許多其他屬性，其中 `withoutShadow` 是一個屬性。
選項鍵
withoutShadow − 此屬性接受一個布林值，允許我們去除當前物件的陰影。
示例 1
使用 `withoutShadow` 屬性並傳遞 `false` 值
讓我們來看一個程式碼示例，看看當 `withoutShadow` 屬性傳遞 `false` 值時輸出影像是什麼樣的。一旦我們從開發者工具開啟控制檯，我們就可以看到 IText 物件的 URL 表示。我們可以複製該 URL 並將其貼上到新標籤頁的位址列中以檢視最終輸出。在這個例子中，我們為 IText 物件傳遞了陰影屬性。由於我們還為 `withoutShadow` 屬性傳遞了 `false` 值，因此最終輸出影像仍然包含陰影。
<!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 withoutShadow property and passing it a false value</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 that the final image contains a shadow </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: 50, 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({ withoutShadow: false })); </script> </body> </html>
示例 2
使用 `withoutShadow` 屬性並傳遞 `true` 值
讓我們來看一個程式碼示例，看看當使用 `withoutShadow` 屬性並向其傳遞 `true` 值時，IText 物件的最終輸出影像是什麼樣的。在這種情況下，最終輸出影像將不包含任何陰影。
<!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 withoutShadow property and passing it a true value</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 that the final image does not contain a shadow </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: 50, 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({ withoutShadow: true })); </script> </body> </html>
176 次瀏覽
