如何在FabricJS中設定線條的邊框顏色？

在本教程中，我們將學習如何在FabricJS中設定線條的邊框顏色。線條元素是FabricJS提供的基本元素之一，用於建立直線。因為線條元素在幾何上是一維的，並且不包含內部，所以它們永遠不會被填充。

我們可以透過建立fabric.Line的例項，指定線條的x和y座標並將其新增到畫布上來建立一個線條物件。當我們的物件處於活動狀態時，屬性borderColor允許我們操作邊框的顏色。

語法

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

引數

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

  • options (可選) − 此引數是一個物件，它為我們的物件提供額外的自定義選項。使用此引數，可以更改與物件的許多屬性相關聯的原點、筆劃寬度和其他屬性，其中borderColor也是一個屬性。

選項鍵

  • borderColor − 此屬性接受一個字串，用於指定選擇線條物件時的邊框顏色。其預設值為rgb(178,204,255)。

使用字串值傳遞borderColor鍵

示例

讓我們來看一個程式碼示例，說明如何為borderColor屬性賦值。我們將值“red”賦給borderColor鍵，這有助於在選擇線條物件時建立紅色邊框。

<!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 borderColor key with a String value</h2>
   <p>
      You can select the line object to see that the border colour is red.
   </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,
         borderColor: "red"
      });

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

將rgba值傳遞給borderColor鍵

示例

除了傳遞簡單的顏色名稱作為字串之外，我們還可以使用RGBA值，其元件指定紅色、綠色、藍色和alpha的值，其中alpha表示不透明度。在這個例子中，我們使用了rgba(164,0, 0,1)，它是深紅色的rgb值。

<!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 a rgba value to the borderColor key</h2>
   <p>
      You can select the line object to see the border colour added using rgba value
   </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,
         borderColor: "rgba(164,0,0,1)"
      });

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

更新於：2022年10月25日

瀏覽量：159

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告