Собственный API холста позволяет нам добавлять заливку и обводку только при рисовании текста на холсте. Но это тоже можно сделать только на очень низком уровне.

Особенность добавления текста в FabricJS заключается в том, что он работает объектно-ориентированным способом. Это означает, что все, что нам нужно сделать, это создать экземпляры классов, и это даст нам полный контроль над ними. Мы можем масштабировать, наклонять, вращать или анимировать текстовые объекты.

Чтобы добавить текст на холст, просто создайте экземпляр fabric.Text.

fabric.Text расширяет fabric.Object, что означает, что это корневой класс объектов, от которого Fabric.Text наследует свои свойства.

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

Давайте посмотрим, как мы можем создать экземпляр fabric.Text и добавить его на холст. Кстати, я добавил только JS в этот фрагмент кода, так что не забудьте добавить библиотеку fabricjs в свой HTML!

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
      });

      // Instantiate an instance of fabric.Text
      var text = new fabric.Text("I love Potatoes🥔😸", {
        width: 300,
        left: 20,
        top: 90,
        fill: "orange",
/* Just a heads up!
In case you don't know- 
You can press (win logo key + period) to open the emoji keyboard*/
      });

      // Adding it to the canvas
      canvas.add(text);

Игра с параметрами в fabric.Text

Когда мы работаем с текстом, естественно, мы можем захотеть изменить цвет фона, выравнивание текста, размер или толщину шрифта. Я думаю, что наш пример выше требует свечения. Итак, давайте придадим ему сияние, которого он заслуживает.

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
      });

      // Instantiate an instance of fabric.Text
      var text = new fabric.Text(
        "Potatoes are great \nbut potatoes with cheese\nare EPIC.🧀",
        {
          
          left: 80,
          top: 90,
          fontSize: 22, // Default font size is 40
          fontFamily: "Poppins, sans-serif",
          stroke: "black",
          strokeWidth: 0.3,
          textAlign: "right", // Default value is "left"
        }
      );

      // setting a gradient as fill color
      text.set(
        "fill",
        new fabric.Gradient({
          type: "linear",
          coords: {
            x1: 10,
            y1: 80,
            x2: 170,
            y2: 100,
          },
          colorStops: [
            { offset: 0, color: "#d2691e" },
            { offset: 0.3, color: "#ffc40c" },
            { offset: 0.7, color: "#20b2aa" },
            { offset: 1, color: "#ffa07a" },
          ],
        })
      );

      // Adding it to the canvas
      canvas.add(text);

Я не уверен, можно ли это назвать свечением ಠ_ಠ, но в приведенном выше примере я присвоил свойству fontSize значение 22. Как следует из названия, fontSize делает размер нашего текста больше или меньше в зависимости от значения, которое мы ему передаем. Он принимает значение Число (допускаются десятичные значения✅).

Также, поскольку мы узнали о градиентах в предыдущих статьях, я подумал о том, чтобы добавить и его. Иди и проверь, если не видел!

Примечание:

При использовании шрифтов Google не забудьте добавить ссылку в раздел ‹head› вашего HTML-кода следующим образом:

Боковое примечание:

Возможные значения свойства textAlign: «left», «center», «right», «justify», «justify-left», «justify-center» или «justify-right». Однако по умолчанию для него установлено значение «лево».

В следующей статье мы продолжим работу с Fabric.Text, а также немного узнаем о fabric.IText.