首頁 >web前端 >js教程 >如何使用FabricJS設定圓形控制角的顏色？

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

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

在本教學中，我們將使用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刪除

上一篇：如何在使用FabricJS進行縮放時保持矩形的筆畫寬度？下一篇：如何在使用FabricJS進行縮放時保持矩形的筆畫寬度？

看更多