首頁  >  文章  >  web前端  >  如何使用FabricJS設定圓形控制角的顏色?

如何使用FabricJS設定圓形控制角的顏色?

WBOY
WBOY轉載
2023-08-23 10:13:14999瀏覽

如何使用FabricJS設定圓形控制角的顏色?

在本教學中,我們將使用FabricJS來設定Circle的控制角的顏色。當物件處於活動狀態時,cornerColor屬性允許我們操縱控制角的顏色。

語法

new fabric.Circle({ cornerColor: String }: Object)

參數

  • #options(可選) - 此參數是一個物件,提供了對圓形進行其他自訂的選項。使用此參數,可以變更與cornerColor屬性相關的物件的顏色、遊標、描邊寬度和許多其他屬性。

選項鍵

  • #cornerColor - 此屬性接受一個字串,允許我們為選定物件的控制角分配一種顏色。

範例1

將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>

範例2

將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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除