Canvas, FabricJS и его интерактивность

Я считаю, что вчерашняя статья была немного интеллектуальной. Поэтому я хочу, чтобы в этой статье все было по-настоящему базовым. Ну нет, я просто сегодня опоздал, и мне нужно опубликовать его прямо сейчас 😶 Хватит оправдываться 😑 Давайте приступим!

Менеджер- ткань.Холст

Мы знаем, что когда мы создаем экземпляр Fabric.Canvas, он служит оболочкой для элемента HTML ‹canvas›.

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

Итак, мы можем добавлять, удалять или ссылаться на объекты в экземпляре fabric.Canvas.

Однако (и этот момент часто упускают из виду!) он также служит хостом конфигурации.

Когда мы говорим, что что-то нужно настроить, это означает, что это должно быть сформировано или устроено таким образом, чтобы оно соответствовало нашим требованиям. Итак, если мы хотим, чтобы наш холст выглядел или вел себя определенным образом, мы можем положиться на fabric.Canvas для этого.

Таким образом, мы можем программно установить ширину, масштаб или высоту холста. Мы также можем установить цвет фона или изображения или установить цвет наложения, как я сделал ниже. Все эти свойства могут быть изменены по желанию независимо от того, происходит ли это во время создания ткани .Canvas или после.

 // Instance of fabric.Rect
 var rect = new fabric.Rect({
        width: 90,
        height: 80,
        top: 70,
        left: 100,
        fill: "orange",
      });

       // Adding the rectangle object to the canvas
      canvas.add(rect);

      // Specifying the overlay color that we want for the canvas
      canvas.setOverlayColor(
        "rgba(249,66,158, 0.6)",
        canvas.renderAll.bind(canvas)
      );

Что делает FabricJS особенным #lessHyperactivityMoreInteractivity

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

На уровне пользователя объектами на холсте можно манипулировать с помощью касаний или движений мыши. Мы можем перетаскивать, вращать, наклонять, масштабировать или выбирать объекты. Да, мы также можем сгруппировать их просто по активности мыши!

Это возможно благодаря верхнему уровню интерактивности, который является встроенной функцией FabricJS. Если мы хотим отключить избирательность объектов, мы можем просто использовать свойство selectable. Если же мы хотим отключить групповое выделение объектов на холсте, то можем использовать свойство выбор класса Canvas.

Но если вы хотите сделать все возможное и избавиться от всех элементов избирательности в холсте, не стесняйтесь использовать вместо этого fabric.StaticCanvas.

Класс StaticCanvas похож на младшего брата Fabric.Canvas. Он имеет объектную модель обычного класса холста, но только без логики обработки событий. Это похоже на более легкую учебную для ботаников версию интерактивного и забавного fabric.Canvas. Он по-прежнему получает хорошие оценки, по-прежнему позволяет нам играть с этими объектами, но с той лишь разницей, что интерактивного слоя больше нет.