在本教學中,我們將使用FabricJS來設定Circle的控制角的顏色。當物件處於活動狀態時,cornerColor屬性允許我們操縱控制角的顏色。
new fabric.Circle({ cornerColor: String }: Object)
#options(可選) - 此參數是一個物件,提供了對圓形進行其他自訂的選項。使用此參數,可以變更與cornerColor屬性相關的物件的顏色、遊標、描邊寬度和許多其他屬性。
#cornerColor - 此屬性接受一個字串,允許我們為選定物件的控制角分配一種顏色。
將cornerColor作為鍵,並使用顏色名稱作為值傳遞
讓我們透過使用cornerColor屬性來改變顏色的範例。在這種情況下,我們將值「black」指派給鍵,使控制角顯示為黑色。
<!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 colour of controlling corners of circle using FabricJS</h2> <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var cir = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", cornerColor: "black" }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
將RGBA值指派給cornerColor屬性
我們可以將RGBA值指派給鍵的字串值,而不僅僅是傳遞一個簡單的顏色名稱。 RGBA代表紅、綠、藍、透明度(alpha)。讓我們來看一個範例,了解如何實現這一點−
<!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 colour of controlling corners of circle using FabricJS</h2> <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var cir = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", cornerColor: "rgb(255,20,147)" }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
以上是如何使用FabricJS設定圓形控制角的顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!