資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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 物件。同樣，我們可以使用 selectionColor 屬性更改選擇顏色。
語法
new fabric.IText( text: String, { selectionColor: String }: Object)
引數
text − 此引數接受一個字串，即我們想要顯示為文字的文字字串。
options (可選) − 此引數是一個物件，它為我們的 IText 物件提供了額外的自定義選項。使用此引數，可以更改與 IText 物件相關的顏色、游標、筆劃寬度和許多其他屬性，其中 selectionColor 是一個屬性。
選項鍵
selectionColor − 此屬性接受一個字串值，用於確定文字選擇顏色。預設值為 rgba(17, 119, 255, 0.3)。
示例 1
IText 物件的預設外觀
讓我們看一個程式碼示例，看看在不使用 selectionColor 屬性時 IText 物件的預設外觀。由於我們沒有指定任何內容，因此選擇顏色為 rgba(17, 119, 255, 0.3)，這是預設值。
<!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 IText object</h2> <p>You can click on the IText object and select the text to see the selection colour </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.", { width: 300, left: 60, top: 70, fill: "red", }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
示例 2
將 selectionColor 屬性作為鍵傳遞，並使用自定義值
在這個例子中，我們傳遞了 selectionColor 屬性作為鍵，其值為 rgba(0,0,255,0.5)，即帶有 0.5 不透明度的藍色。
<!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 selectionColor property as key with a custom value</h2> <p>You can click on the IText object and select the text to see the selection colour is blue</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.", { width: 300, left: 60, top: 70, fill: "red", selectionColor: "rgba(0,0,255,0.5)", }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
664 次瀏覽
