FabricJS – 如何設定線條控制角的顏色？

在本教程中，我們將學習如何使用FabricJS設定線條控制角的顏色。線條元素是FabricJS提供的基本元素之一，用於建立直線。由於線條元素在幾何上是一維的，並且不包含內部，因此它們永遠不會被填充。我們可以透過建立fabric.Line的例項，指定線條的X和Y座標並將其新增到畫布上來建立一個線條物件。cornerColor屬性允許我們在物件處於活動狀態時操作控制角的顏色。

語法

new fabric.Line( points: Array, { cornerColor: String }: Object)

引數

  • points − 此引數接受一個陣列點，用於確定(x1, y1)和(x2, y2)值，分別是線段起點和終點的x軸和y軸座標。

  • options (可選) − 此引數是一個物件，它為我們的物件提供額外的自定義選項。使用此引數可以更改與物件相關的顏色、游標、筆劃寬度以及許多其他屬性，其中cornerColor就是一個屬性。

選項鍵

  • cornerColor − 此屬性接受一個字串，允許我們在物件被選中時為控制角分配顏色。預設值為rgb(178,204,255)。

將cornerColor作為鍵，顏色名稱作為值傳遞

示例

讓我們來看一個程式碼示例，使用cornerColor屬性更改顏色。在本例中，我們將值“orange”分配給鍵，從而使控制角顯示為橙色。

<!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 cornerColor as key with a color name as value</h2>
   <p>
      You can select the line object to see that the corner colour is orange
   </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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "orange"
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

為cornerColor屬性分配RGBA值

示例

除了將簡單的顏色名稱作為字串值傳遞給鍵之外，我們還可以分配RGBA值。RGBA代表紅色、綠色、藍色和alpha，其中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>Assigning an RGBA value to the cornerColor property</h2>
   <p>
      You can select the line object to see the corner 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 a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "rgba(255,69,0, 0.8)",
      });

      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

更新於: 2022年10月25日

瀏覽量：377

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.