Рисование с помощью FabricJS

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

Я хотел включить круг и эллипс в одну и ту же статью, потому что концепция их рисования на холсте очень похожа.

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

new fabric.Circle( options: Object )
new fabric.Ellipse( options: Object )

Конические сечения

Причина их сходства в том, что окружность и эллипс принадлежат к семейству конических сечений. Конические сечения получаются, когда мы разрезаем конус с такой самолет:

Теперь давайте не будем слишком увлекаться математикой, потому что на этом мы далеко не продвинемся. С точки зрения непрофессионала, круг становится эллипсом, когда он растягивается в одном направлении (вертикальном или горизонтальном).

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

Если мы инициализируем круг, незадав значение свойству radius, то круг не будет отображаться на холсте.

Точно так же нам нужно установить значения для rx (горизонтальный радиус) и ry (вертикальный радиус), когда мы инициализировать объект эллипса.

Изучение вариантов эллипса и круга

Давайте, наконец, испачкаем руки и напишем код, не так ли?

<!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", {
        backgroundColor: "black",
      });

      // Creating an instance of fabric.Ellipse
      var ellipse = new fabric.Ellipse({
        top: 90,
        left: 70,
        rx: 90, // Horizontal radius
        ry: 45, // vertical radius
        stroke: "#a76bcf",
        strokeWidth: 3,
        angle: 15, 
        borderColor: "#7fff00",
        cornerColor: "#7fff00",
      });

      // Creating an instance of fabric.Circle
      var circle = new fabric.Circle({
        top: 70,
        left: 250,
        radius: 80, // radius of the circle is 80 px
        fill: "#00b7eb",
        scaleX: 0.5, // scaling done in x-axis which reduces the size by half
        scaleY: 0.5, // scaling done in y-axis which reduces the size by half
        borderColor: "#7fff00",
        cornerColor: "#7fff00",
      });

      // Adding them to the canvas
      canvas.add(ellipse, circle);
    </script>
  </body>
</html>

Честно говоря, может показаться, что это много (особенно, если вы новичок), но на самом деле НЕТ. По мере того, как вы продолжаете практиковаться, все это будет для вас пустяком, я обещаю (^ — ^). И если это не так для вас, то вы, должно быть, делаете что-то правильно в своей жизни, чего я не делал.

Рисование эллипса на холсте

Чтобы создать эллипс, я создал экземпляр fabric.Ellipse и установил значения для rx и ry (don' забудь это!).

Свойства stroke и strokeWidth определяют цвет и ширину штриха объекта. Возможно, вы помните это свойство со времен css — и поверьте мне, между ними нет никакой разницы.

Рисуем круг на холсте

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

Вы можете заметить свойства borderColor и cornerColor и подумать, что граница круга должна быть его обводкой, так что цель этих свойств?

Если вы так думали, то вы R-I-G-H-T, потому что свойства borderColor и angleColor предназначены для изменения цвета управляющей границы и управляющего угла соответственно.

FabricJS дает нам свободу перемещать, масштабировать или наклонять объект во всех направлениях с помощью управления границами и углами. Как следует из названия, как только мы нажимаем на объект, его элементы управления оказываются в наших руках, и мы можем манипулировать им, используя эти элементы управления, как захотим.

Больше вариантов…

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

Вы можете просто добавить свойство lockRotation (принимает логическое значение), чтобы отключить элемент управления mid-top-rotate, который позволяет нам вращать объект.

  // Creating an instance of fabric.Ellipse
      var ellipse = new fabric.Ellipse({
        top: 90,
        left: 70,
        rx: 90, // Horizontal radius
        ry: 45, // vertical radius
        stroke: "#a76bcf",
        strokeWidth: 3,
        angle: 15,
        borderColor: "#7fff00",
        cornerColor: "#7fff00",
        lockMovementX: true, // Stops any movement in the x-direction
      });

      // Creating an instance of fabric.Circle
      var circle = new fabric.Circle({
        top: 70,
        left: 250,
        radius: 80, // radius of the circle is 80 px
        fill: "#00b7eb",
        scaleX: 0.5, // scaling done in x-axis which reduces the size by half
        scaleY: 0.5, // scaling done in y-axis which reduces the size by half
        borderColor: "#7fff00",
        cornerColor: "#7fff00",
        lockRotation: true, // Halts the middle-top-rotate control
      });

Что касается эллипса, для свойства lockMovementX (принимает логическое значение) установлено значение false, что не позволяет нам перемещать эллипс в направлении x.

Вы можете видеть на гифке ниже, что, хотя я могу перемещать круг во всех направлениях на холсте, я могу перемещать эллипс только по оси Y холста.

Кроме того, если вы заметили, хотя мы не назначили цвет заливки эллипсу, на самом деле цвет его заливки черный. Это связано с тем, что по умолчанию FabricJS устанавливает цвет заливки объекта как rgb(0,0,0), что является не чем иным, как цветовым кодом rgb для черного.

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

Вот и все, что касается сегодняшней статьи. Надеюсь, это было легко усвоить. Увидимся~

Рисование с помощью FabricJS — часть 3