資料結構
網路
關係資料庫管理系統
作業系統
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 物件。同樣，我們也可以使用 originX 屬性設定變換的水平原點。
語法
new fabric.IText(text: String , { originX : String }: Object)
引數
text − 此引數接受一個字串，即我們要顯示的文字字串。
options (可選) − 此引數是一個物件，它為我們的 IText 物件提供了額外的自定義選項。使用此引數，可以更改與物件相關的顏色、游標、邊框寬度以及許多其他屬性，其中 originX 是一個屬性。
選項鍵
originX − 此屬性接受一個字串值，允許我們設定變換的水平原點。可能的值為“left”（左）、“right”（右）和“center”（居中）。其預設值為“left”（左）。
示例 1
IText 物件的預設外觀
讓我們看一個程式碼示例，瞭解當不使用 originX 屬性時，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>Default appearance of the IText object</h2> <p>You can see that the horizontal origin of transformation is towards left</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 dolor sit amet",{ width: 300, left: 210, top: 70, fill: "#e75c22", } ); // Add it to the canvas canvas.add(itext); </script> </body> </html>
示例 2
將 originX 屬性作為鍵傳遞，並帶有值
在本示例中，我們將看到為 originX 屬性賦值如何更改變換的水平原點。在本示例中，我們使用了兩個 IText 物件來顯示差異。在我們的第一個 IText 物件中，由於我們傳遞的值為“right”（右），因此變換的水平原點現在位於右側。相同的 310 左屬性應用於兩個 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>Passing the originX property as key with a value</h2> <p>You can see that the first IText object(itext1) has drifted further away while IText2 maintains the default horizontal origin of transformation </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 itext1 = new fabric.IText("First IText object", { width: 300, left: 310, top: 70, fill: "#e75c22", originX: "right", }); // Initiate another itext object var itext2 = new fabric.IText("Second IText object", { width: 300, left: 310, top: 70, fill: "#22e75c", }); // Add both to the canvas canvas.add(itext1); canvas.add(itext2); </script> </body> </html>
128 次檢視
