PixiEditor Devlog 9 - Vector Tools

We've began working on vector tools. Another major feature of PixiEditor 2.0. Read more about it in this devlog.

Introduction

To people who are not familiar with the term, vectors in computer graphics are shapes that are defined by mathematical equations. They are not made of pixels, but rather by lines and curves.

Examples of vector tools are rectangles, ellipses, lines, and curves.

So far PixiEditor was raster focued, especially pixel-art, but we want to expand it to be more versatile. That's why we are adding vector tools.

note

Fun fact, technically speaking, upscaling pixel art behaves like vectors. The problem with scaling images is that they usually have scaling filters applied, which makes them blurry. But because pixel art is usually scaled without any filters and pixelated look is desired, it can be scaled without losing quality.

The design

The fact that PixiEditor will allow for creating different kinds of 2D graphics, brings a lot of design challenges. We've came up with a design that hopefully will be easy to use and understand. Introducing toolsets!

Toolsets are a group of tools. That's it. You can switch them anytime, define your own, use the built-in ones or install new ones (in the future).

Here's how it looks like:

Pretty cool if you ask me.

All toolsets are configurable using a simple JSON config file

[
  {
    "Name": "PIXEL_ART_TOOLSET",
    "Tools": [
      "MoveViewport",
      "RotateViewport",
      "Move",
      "Pen",
      "Select",
      "MagicWand",
      "Lasso",
      "FloodFill",
      "RasterLine",
      "RasterEllipse",
      "RasterRectangle",
      "Eraser",
      "ColorPicker",
      "Brightness",
      "Zoom"
    ]
  },
  {
    "Name": "VECTOR_TOOLSET",
    "Tools": [
      "MoveViewport",
      "RotateViewport",
      "Move",
      "VectorLine",
      "VectorEllipse",
      "VectorRectangle"
    ]
  }
]

In the future it will most likely get it's own configure UI, but for now it's simple enough.

Let's get into the action

Time to show off some of the vector tools in action. At the moment we have whooping 3 of them: Line, Ellipse and Rectangle. You can create, move, resize, skew and rotate them. There are also options to change stroke width, stroke color and fill color.

There is one problem though, our renderer is not designed for vectors, that's why you can see on the video that the shapes are pixelated. This is a challenge we will have to overcome in the following weeks. We have drafted a new renderer design that should support all kinds of custom rendering elements, not only raster and vector. In fact, it will be a gateway for infinite canvas as well!

Another thing that is missing is snapping, it's very hard at the moment to draw precise shapes. This is also something we will have to work on. But I believe whole app would benefit from it, not only vector tools.

Conclusion

I am very excited to see our next milestone becoming a reality, it's very fun to implement all of these new features. I hope you are excited as well!

Long live open-source and freedom of creation!