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

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

new fabric.Rect( options: Object )

Как я объяснял в своей предыдущей статье, класс Rectangle расширяет fabric.Object и возвращает нам экземпляр fabric.Rect. Параметрыявляются ничем иным, как свойствами, которые позволяют нам настраивать наш прямоугольник.

Инициализация и настройка прямоугольника

В приведенном ниже коде видно, что я создал экземпляр Fabric.Rect и добавил его на холст с помощью метода add. Метод add просто добавляет объект на холст.

Поскольку параметр options принимает объект, все свойства должны быть указаны как пары ключ:значение. Я использовал следующие свойства в параметре options:

  1. top: числовое значение, указывающее верхнюю позицию объекта. Здесь используется значение 90.
  2. слева: числовое значение, обозначающее левое положение объекта. Здесь используется значение 70.
  3. ширина: обозначает ширину прямоугольника. В этом случае прямоугольный объект имеет ширину 50 пикселей.
  4. height: обозначает высоту прямоугольника. В этом случае прямоугольный объект имеет ширину 45 пикселей.
  5. fill: цвет заливки объекта. Здесь я использовал шестнадцатеричное значение. Вы также можете использовать значение rgba, например, fill: «rgba(248,222,126,1)»
  6. угол: обозначает угол в градусах.
  7. scaleX: масштабный коэффициент по горизонтали. Здесь мы использовали целое число, но вы также можете использовать десятичные значения (например, 1,5).
  8. scaleY: коэффициент масштабирования по вертикали.
<!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");

      // Creating a rectangle object
      var rect = new fabric.Rect({
        top: 90,
        left: 70,
        width: 50,
        height: 45,
        fill: "#f8de7e",
        angle: 15,
        scaleX: 2,
        scaleY: 2,
      });

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

Изучение других свойств

Давайте проведем раунд 2 с параметром options. В этом примере я создал два прямоугольных объекта. Объект babyRect в основном представляет собой скопированную версию исходного прямоугольного объекта, но все, что я сделал, это избавился от scaleX и scaleY.

<!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");

      // Creating a rectangle object
      var rect = new fabric.Rect({
        top: 90,
        left: 70,
        width: 50,
        height: 45,
        fill: "rgba(248,222,126,1)",
        angle: 15,
        scaleX: 2,
        scaleY: 2,
        objectCaching: false,
      });

      // Initiating another rectangle object
      var babyRect = new fabric.Rect({
        top: 10,
        left: 20,
        width: 50,
        height: 45,
        fill: "rgba(248,222,126,1)",
        angle: 15,
      });

      // Changing the fill color of the bigger rectangle when mousedown event occurs
      rect.on("mousedown", () => {
        rect.set("fill", "#9370db");
      });

      // Making the bigger rectangle invisible when it is moved
      rect.on("moving", () => {
        rect.set("visible", false);
      });

      // Again making it visible
      rect.on("modified", () => {
        rect.set("visible", true);
      });

      // Adding it to the canvas
      canvas.add(rect, babyRect);
      canvas.renderAll();
    </script>
  </body>
</html>

Большой прямоугольник становится невидимым при перемещении, потому что мы установили для свойства visible значение false. Вы также можете видеть, что в этом примере я использовал события. Метод on() просто прикрепляет переданные нами события к прямоугольному объекту и запускает функцию при возникновении этого события.

Хотя я использовал здесь функцию стрелки, этот пример будет работать нормально, даже если вы используете обычный синтаксис функции. Если вы не знаете о стрелочных функциях, нажмите здесь.

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