В этой статье я покажу, как мы можем создавать линии и полилинии на холсте с помощью FabricJS.

Линия — это элемент, который начинается в одной точке и заканчивается в другой на двумерной плоскости. Полилиния — это объект, который мы получаем при соединении нескольких сегментов линии.

Примечание:

  1. Нажмите здесь, если вы все еще не совсем понимаете Объекты.

Теперь посмотрим на определение конструктора:

new fabric.Line( points: Array, options: Object )
new fabric.Polyline( points: Array, options: Object )

Вы можете посмотреть на определение конструктора и подумать, что между ними нет никакой разницы. Однако объект Points Array of Line указывает начальную (x1, y1) и конечную координаты (x2, y2) линии. Принимая во внимание, что массив точек объекта Polyline указывает точки, которые мы хотим использовать в качестве координат, где каждая точка является объектом с координатами x и y.

Создание линейного объекта на холсте

Мы можем создать линейный объект на холсте с помощью FabricJS следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
  </head>
  <body>
    <canvas
      id="canvas"
      style="border: 2px solid black"
      width="400"
      height="300"
    ></canvas>
    <script>
      var canvas = new fabric.Canvas("canvas");

      // Initiating a line object
      var line = new fabric.Line([100, 90, 300, 20], {
        stroke: "green",
      });
      // Adding it to the canvas
      canvas.add(line);
    </script>
  </body>
</html>

Создание полилинейного объекта на холсте

Мы можем создать полилинейный объект и добавить его на холст следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
  </head>
  <body>
    <canvas
      id="canvas"
      style="border: 2px solid black"
      width="400"
      height="300"
    ></canvas>
    <script>
      var canvas = new fabric.Canvas("canvas");

      // Initiating a polyline object
      var polyline = new fabric.Polyline(
        [
          { x: 50, y: 50 },
          { x: 50, y: 150 },
          { x: 200, y: 250 },
          { x: 200, y: 50 },
          { x: 125, y: 100 },
        ],
        {
          stroke: "pink", // Setting the stroke color as pink
          strokeWidth: 2, // Setting the stroke width value
          fill: "#fada5e", // Using a hexadecimal value as fill color
          left: 50, // left offset
          top: 50, // top offset
        }
      );

      // Adding it to the canvas
      canvas.add(polyline);
    </script>
  </body>
</html>

Создание линии с помощью Polyline

Чтобы доказать свое предыдущее замечание о том, что ломаная линия получается путем соединения нескольких сегментов линии, я хотел показать простой пример того, как вы можете создать линейный объект, создав экземпляр fabric.Polyline.

Нам нужны (x1, y1) и (x2, y2), которые обозначают начальную и конечную координаты линии.

В приведенном ниже коде вы можете видеть, что (x1, y1) равно (50, 50) и (x2, y2) равно (250, 150).

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
  </head>
  <body>
    <canvas
      id="canvas"
      style="border: 2px solid black"
      width="400"
      height="300"
    ></canvas>
    <script>
      var canvas = new fabric.Canvas("canvas");

      // Initiating a polyline object
      var polyline = new fabric.Polyline(
        [
          { x: 50, y: 50 },
          { x: 250, y: 150 },
        ],
        {
          stroke: "#ff69b4", // Setting the stroke color
          strokeWidth: 5, // Setting the stroke width value
        }
      );

      // Adding it to the canvas
      canvas.add(polyline);
    </script>
  </body>
</html>

Поэтому мы увидели, как легко создавать линии и полилинии с помощью FabricJS. В следующей статье мы увидим, как мы можем создать объект треугольника с помощью FabricJS.