D
D
Daniel Demidko2019-05-16 00:35:37
Programming
Daniel Demidko, 2019-05-16 00:35:37

A simple vector graphics editor?

I want to make my own simple vector graphics editor: drawing lines, polylines, shapes, and their rotations and moving around the canvas.
Please advise the literature where this topic is covered, starting with algorithms?
I plan to use C# WPF (from WPF, only canvas and a point on it are used).

Answer the question

In order to leave comments, you need to log in

2 answer(s)
V
Vladimir Proskurin, 2019-05-16
@DanielDemidko

Well, if you could find exact instructions for all tasks, it would be boring.
Try to start small, for example:
1) Create a canvas, just an object that will contain shapes. It will be some kind of viewport.
2) Scroll this canvas with the mouse, in all directions.
3) Make it possible to dynamically add objects to the canvas, first define a base object like a rectangle or a line. It is easier at this point to immediately define the IShape interface, so it will be easier to unify all objects when adding them to the canvas, and the canvas should not know anything about these objects, only about the interface.
4) Drag&drop the added objects so that they can be dragged.
5) Add a zoom, this is not an easy step, there is a lot to take into account, especially the positioning of drag & drop objects breaks down on this task.
6) Make an object transformer that will change their size (for rectangles, etc.), change points (for lines), rotate, etc.
7) Make a property editor through which you will assign attributes to your objects, such as fill color, frame color, frame width, opacity, etc.
8) Add various objects little by little. You can peek into other editors, such as inkscape.
9) Implement canvas saving and loading. Here it is better not to invent your own data format, but to use an open one, for example svg.
10) Clipboard. There is either its own format in a binary, or the same svg in text form (which is much better, this is done in Figma).
11) Undo / redo - an important thing, and at first glance simple. But it is simple only if you remember the steps by taking a snapshot of all current objects, but this method is bad. Normally, you need to take a snapshot of the changes for any operation on objects on the canvas. For example, move the cube 10px to the left, and write the value
{ id: 'id of the cube', x: -10 } into memory
and then when you click cancel, you will simply do the reverse operation, add these 10px. Here you will have difficulty with the "return" operation, but I think if you have reached this step, you already have perseverance. Useful patterns: command and memento
12) Well, here are the little things, various killer features, new objects, properties, various menus, etc.

A
Alexander Skusnov, 2019-05-17
@AlexSku

I advise you to study .emf (enhanced metafile)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question