Stitchboard is a web-based vector graphic art application built with Fabric.js.
This was a project created for my Computer Graphics course at Grand Valley State University Winter 2021.
*Please note, this was only tested in the chromium version of Microsoft Edge, so your results/compatability may vary.
We'll start with the toolbar on the left side of the screen. At present, Stitchboard has five main tools artists can use at their disposal to create graphics:
hotkey: 1
Select can be used either by clicking directly on an object (or multiple objects while holding Shift) or dragging a selection marquee over the object(s) to be selected. Once an object is selected, objects can be easily transformed via a conventional free transform overlay.
hotkey: 2
Brush is a free-drawing vector brush where the user can simply draw on the canvas with their mouse. The brush size can also be changed in the right side properties panel, or by using the bracket keys '[' and ']' to decrease and increase the brush size, respectively.
hotkeys: 3, 4, 5
The first of our shape tools, Rectangle will add a rectangle to the canvas. At present, each shape will spawn at (50, 50) on the canvas. From there, all shapes can be transformed to the intended size and location.
The color picker is used to change the color of your next object. At the moment, the color picker does not change the color of objects already placed on the canvas :(
hotkeys: z, x
Stitchboard supports undo and redo functionality though a library created by Alim Özdemir.
On the right side of the screen, Stitchboard has a properties panel which provides some more granular control over the canvas.
The Pivot box is a useful tool for changing the transformation point around which the user can rotate their shape. By default, the rotational point is at the center of the object/selection.
The Transform panel is where the user can directly enter values for the X,Y coordinates, the width and height of the object, its rotation angle, and the angle of horizontal shearing. These values are also automatically updated when the user is using the free transform widget, so this panel can be also be useful for the information it provides to the user.
