В этой статье я покажу, как вы можете создавать прямоугольные объекты и экспериментировать с ними в FabricJS.
Давайте сначала посмотрим на определение конструктора:
new fabric.Rect( options: Object )
Как я объяснял в своей предыдущей статье, класс Rectangle расширяет fabric.Object и возвращает нам экземпляр fabric.Rect. Параметрыявляются ничем иным, как свойствами, которые позволяют нам настраивать наш прямоугольник.
Инициализация и настройка прямоугольника
В приведенном ниже коде видно, что я создал экземпляр Fabric.Rect и добавил его на холст с помощью метода add. Метод add просто добавляет объект на холст.
Поскольку параметр options принимает объект, все свойства должны быть указаны как пары ключ:значение. Я использовал следующие свойства в параметре options:
- top: числовое значение, указывающее верхнюю позицию объекта. Здесь используется значение 90.
- слева: числовое значение, обозначающее левое положение объекта. Здесь используется значение 70.
- ширина: обозначает ширину прямоугольника. В этом случае прямоугольный объект имеет ширину 50 пикселей.
- height: обозначает высоту прямоугольника. В этом случае прямоугольный объект имеет ширину 45 пикселей.
- fill: цвет заливки объекта. Здесь я использовал шестнадцатеричное значение. Вы также можете использовать значение rgba, например, fill: «rgba(248,222,126,1)»
- угол: обозначает угол в градусах.
- scaleX: масштабный коэффициент по горизонтали. Здесь мы использовали целое число, но вы также можете использовать десятичные значения (например, 1,5).
- 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() просто прикрепляет переданные нами события к прямоугольному объекту и запускает функцию при возникновении этого события.
Хотя я использовал здесь функцию стрелки, этот пример будет работать нормально, даже если вы используете обычный синтаксис функции. Если вы не знаете о стрелочных функциях, нажмите здесь.
Итак, сегодня мы узнали немного больше о рисовании объектов. В следующей статье мы узнаем, как нарисовать круг на холсте.