Это завершающий урок Рисование с помощью FabricJS, и после этого мы, наконец, можем перейти к более новым темам.

Но сначала давайте посмотрим, как мы можем создать треугольник на холсте с помощью FabricJS.

Есть несколько способов создать треугольник в FabricJS. Мы можем создать экземпляр fabric.Triangle или мы можем создать экземпляр Polyline object и предоставить ему координаты x и y, которые нужны для нашего треугольника, или мы также можем сделать то же самое, создав экземпляр fabric.Polygon.

Когда мы рисуем треугольник, инициируя объект fabric.Triangle, мы получаем равнобедренный треугольник, основание которого будет задано свойством width и высота с помощью свойства height.

Давайте посмотрим на определение конструктора:

new fabric.Triangle( options: Object )

Создание экземпляра fabric.Triangle

В приведенном ниже коде я создал экземпляр fabric.Triangle. В качестве опций я предоставил свойству width значение 150, что означает, что основание треугольника будет иметь ширину 150 пикселей. Точно так же я указал значение свойства height, равное 200 пикселям.

  var triangle = new fabric.Triangle({
        width: 150,
        height: 200,
        fill: "#ff8243",
      });

// adding it to the canvas
canvas.add(triangle)

Добавление нескольких объектов на холст

Очевидно, мы знаем, как добавить несколько объектов на холст, верно? Мы просто вызываем метод add() и продолжаем добавлять объекты один за другим, разделяя их запятыми следующим образом: add(object1, object2, object3, object4, …..)

Я полностью понимаю, если это все еще не кристально ясно. Итак, давайте попробуем понять это на примере ниже:

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"
      integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <canvas
      id="canvas"
      style="border: 2px solid black"
      width="400"
      height="300"
    ></canvas>

    <script>
      var canvas = new fabric.Canvas("canvas");

      // Creating a rectangle object for no reason
      var rect = new fabric.Rect({
        width: 150,
        height: 100,
        fill: "#ffbf00",
        top: 200,
        selectable: false, // Unselectable
      });

      // First triangle object
      var triangleOne = new fabric.Triangle({
        width: 150,
        height: 200,
        fill: "#ff8243",
        selectable: false, // Unselectable
      });

      // Second triangle object
      var triangleTwo = new fabric.Triangle({
        left: 37.5,
        width: 75,
        height: 100,
        fill: "#ff0038",
        selectable: false, // Unselectable
      });

      // This is the first text object

      var text1 = new fabric.Text("Happily \nUnbothered", {
        fontFamily: "Roboto, Sans-serif",
        //  fontStyle: "Sans-serif" -- Wrong approach
        fontSize: 20,
        top: 240,
        fontWeight: 800,
        left: 10,
      });

      // The second text object

      var text2 = new fabric.Text("Eyebrows \ntwitching", {
        fontFamily: "Roboto, Sans-serif",
        fontSize: 15,
        top: 130,
        fontWeight: 800,
        left: 35,
      });

      // Creating the third text object

      var text3 = new fabric.Text(
        "Wanting\nto\nthrow\nthe\nevil jerk\noff\nthis\ntower",
        {
          fontFamily: "Roboto, Sans-serif",
          fontSize: 5,
          top: 50,
          fontWeight: 800,
          left: 60,
        }
      );

      // Adding multiple objects
      canvas.add(rect, triangleOne, triangleTwo, text1, text2, text3);
    </script>
  </body>
</html>

Итак, это ужасно длинный код из-за моего личного разочарования после переплаты НЕОБХОДИМО. Это заставило меня захотеть создать то, что я назвал «башней крайнего раздражения» (-____-).

При этом давайте разберемся по порядку:

// First triangle object
      var triangleOne = new fabric.Triangle({
        width: 150,
        height: 200,
        fill: "#ff8243",
        selectable: false, // Unselectable
      });

      // Second triangle object
      var triangleTwo = new fabric.Triangle({
        left: 37.5,
        width: 75,
        height: 100,
        fill: "#ff0038",
        selectable: false, // Unselectable
      });

Это два треугольных объекта, которые я создал. Вы также можете видеть, что я использовал свойство selectable и передал ему ложное значение. Объект можно выделить на холсте, просто щелкнув по нему. Когда свойство выбираемый отключено, это не разрешено, и поэтому объекты становятся фиксированными.

Поскольку я не передал selectable как false объектам Text, вы увидите, что в выходных данных только объекты Text выбираемый.

// This is the first text object

      var text1 = new fabric.Text("Happily \nUnbothered", {
        fontFamily: "Roboto, Sans-serif",
        //  fontStyle: "Sans-serif" -- Wrong approach
        fontSize: 20,
        top: 240,
        fontWeight: 800,
        left: 10,
      });

Я также создал три текстовых объекта, один из которых показан выше. Мы можем добавлять текст на холст, создавая экземпляры fabric.Text, и да, как и любой другой объект, мы можем предоставить ему необязательные параметры Объект, который позволяет нам играть с его свойствами. Но мы должны предоставить ему текстовую строку в качестве первого параметра. Подробнее о ткани можно читать. Текст здесь.

Создание треугольника с помощью fabric.Polygon

Любой замкнутый объект в двумерной плоскости, который имеет много сторон, можно назвать многоугольником. Согласно Википедии, слово полигон происходит от греческих слов, которые по существу переводятся как много и угол.

Теперь вы знаете упражнение, так что давайте инициируем экземпляр fabric.Polygon и создадим с его помощью треугольник.

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"
      integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></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 polygon object
      var triangle = new fabric.Polygon(
        [
          { x: 0, y: 0 },
          { x: 100, y: 150 },
          { x: 0, y: 200 },
        ],
        {
          fill: "#ffbf00",
          top: 20,
          left: 50,
        }
      );

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

В двухмерной системе координат треугольник можно нарисовать, нарисовав три точки и соединив их. Идея остается прежней и здесь.

Для создания треугольника нам нужны три точки, поэтому мы указали массив точек, где каждая точка представляет собой просто объект со значениями координат x и y.

Вывод будет выглядеть следующим образом:

Мы можем нарисовать любой многоугольник при условии, что мы передаем правильные координаты точкам массива fabric.Polygon.

Бесполезный аутро

Извините за внезапный эмоциональный всплеск, ребята…. *вздох* Думаю, мне определенно нужно посмотреть какой-нибудь банально-милый кошачий материал.

К счастью, мы наконец-то научились рисовать несколько объектов. Продолжая практиковаться и экспериментировать, вы станете в этом мастером. В следующей статье мы узнаем о градиентах. А пока, увидимся~.