FabricJS – 如何设置线条控制角的颜色？-js教程-PHP中文网

FabricJS – 如何设置线条控制角的颜色？

王林

发布： 2023-09-09 21:57:02

转载

1527 人浏览过

FabricJS – 如何设置线条控制角的颜色？

在本教程中，我们将学习如何使用 FabricJS 设置 Line 控制角的颜色。 Line 元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部，因此它们永远不会被填充。我们可以通过创建fabric.Line的实例来创建线条对象，指定线条的X和Y坐标并将其添加到画布中。 cornerColor 属性允许我们在对象处于活动状态时操纵控制角的颜色。

语法

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

登录后复制

参数

points - 此参数接受一个点的Array，它确定 (x1, y1) 和 (x2, y2)值，分别是线的起点和终点的 x 轴坐标和 y 轴坐标。
选项（可选） - 此参数是一个对象，它为我们的目的。使用此参数，可以更改与 cornerColor 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。

选项键

cornerColor - 该属性接受一个String，它允许我们为角分配颜色当主动选择对象时控制角点。默认值为rgb(178,204,255)。

将 cornerColor 作为键传递，并以颜色名称作为值

示例

让我们看一个使用 cornerColor 属性更改颜色的代码示例。在本例中，我们为该键分配了“橙色”值，从而使控制角显示为橙色。

<!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 值，而不是将简单的颜色名称作为 String 值传递给键。 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>

登录后复制

以上是FabricJS – 如何设置线条控制角的颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！