資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 矯正 IText 物件？
在本教程中，我們將學習如何使用 FabricJS 矯正 IText 物件。IText 類是在 FabricJS 1.4 版本中引入的，它擴充套件了 fabric.Text 並用於建立 IText 例項。IText 例項使我們能夠自由地選擇、剪下、貼上或新增新文字，而無需額外的配置。它還支援各種鍵盤組合和滑鼠/觸控組合，使文字具有互動性，而這些功能在 Text 中是不提供的。
然而，基於 IText 的文字框允許我們調整文字矩形的大小並自動換行。這對於 IText 來說並不適用，因為高度不會根據換行進行調整。我們可以使用各種屬性來操作 IText 物件。同樣，我們可以使用 straighten 方法矯正 IText 物件。
語法
straighten(): fabric.Object
示例 1
在不使用 straighten 方法的情況下傳遞 angle 屬性值
讓我們看一個程式碼示例，瞭解當不使用 straighten 方法時 IText 物件的外觀。straighten 方法透過將物件從當前角度旋轉到 0、90、180 或 270 等來矯正物件，具體取決於哪個角度更接近。angle 屬性以度為單位設定物件的旋轉角度。在這裡，我們將其指定為 45。但是，由於我們沒有應用 straighten 屬性，因此旋轉角度將保持 45 度。
<!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>Passing the angle property a value without using the straighten method</h2> <p>You can see that the itext object has an angle of 45 degrees</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 an itext object var itext = new fabric.IText("Add Sample Text Here
Lorem ipsum ", { width: 300, left: 210, top: 70, fontSize: 30, fill: "#b666d2", backgroundColor: "#f8f4ff", angle: 45, }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
示例 2
使用 straighten 方法
讓我們看一個程式碼示例，瞭解當與 angle 屬性一起使用 straighten 方法時 IText 物件的外觀。雖然我們將旋轉角度設定為 45 度，但我們的 itext 物件將透過將其旋轉回 0 度來矯正，因為我們使用了 straighten 方法。
<!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 straighten method</h2> <p>You can see that the angle of rotation is 0 degree for the itext object</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 an itext object var itext = new fabric.IText("Add Sample Text Here
Lorem ipsum ", { width: 300, left: 210, top: 70, fontSize: 30, fill: "#b666d2", backgroundColor: "#f8f4ff", angle: 45, }); // Add it to the canvas canvas.add(itext); // Using the straighten method itext.straighten(); </script> </body> </html>
更新於: 2022-09-13
149 次瀏覽
廣告