在本文中,我們將學習如何使用 FabricJS 設定畫布上選擇區域的邊框顏色。選擇指示是否應啟用群組選擇。 FabricJS 允許我們使用 SelectionBorderColor 屬性來相應地調整邊框顏色。
new fabric.Canvas(element: HTMLElement|String, { selectionBorderColor: String }: Object)
#元素 - 此參數是
選項(可選) - 此參數是一個對象,它提供對我們的畫布進行額外的自訂。使用此參數,可以更改與畫布相關的顏色、遊標、邊框寬度等屬性以及許多其他屬性,其中selectionBorderColor是我們可以用來指示選取範圍邊框顏色的屬性。 SelectionBorderColor 屬性的預設值為 rgba(255,255,255,0.3)。
使用顏色名稱設定選擇區域color
selectionBorderColor 屬性接受一個字串,該字串確定選取範圍邊框的顏色。顏色通常比選取範圍本身的顏色深。讓我們看一個程式碼範例,了解如何使用 FabricJS 設定畫布中選擇區域的邊框顏色。
<!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>Setting the border color of a selection area on a canvas</h2> <p>Select an area around the object. You will notice that the border color of the selection would be red in color. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionBorderColor: "green", }); // Creating an instance of the fabric.Rect class var rect = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#006400", angle: 90, }); // Adding it to the canvas canvas.add(rect); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
使用rgba 值作為選擇區域顏色
我們也可以使用「rgba」值,其中「a」代表「alpha ”表示不透明度。在此範例中,我們使用了栗色,其「rgba」值為 (112,0,0),0.9 表示不透明度。
<!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>Setting border colour of selection area using FabricJs</h2> <p>Select an area around the object to see the border color of the selection area. Here we have used "rgba" value to set the border color of the selection area.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionBorderColor: "rgba(112,0,0,0.9)", }); // Creating an instance of the fabric.Rect class var rect = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#006400", angle: 90, }); // Adding it to the canvas canvas.add(rect); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
以上是如何使用 FabricJS 設定畫布上選擇區域的邊框顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!