Krita Sketch is: Colourful

A quick recap of the main topic: My employer, KO GmbH, has been working on a touch version of Krita, called Krita Sketch, over the last few months, and has finally made the first release! So, i'm doing a bit of writing, talking about some of the work i've been doing as a part of this project. (you should also read the dot article, because it's good and has shiny ;) )

In the previous instalment i wrote about rounded corners, and mentioned there was something else in Krita Sketch which was round. Those who use Krita will have already encountered the colour wheel that's used to select colours in the application, and this is a very popular feature with the target audience, so of course we need it in Krita Sketch as well. This entry discusses the implementation of that element

An important point to be made here is that this will not be possible in Qt 5 (which is now finally out of the door, putting to shame all the snarky predictions of postponings  great work people!), and as such this point will need to be revisited once that comes around. However, as with all such things, there was a deadline so some shortcuts had to be made. This was one of those places where we felt it was more prudent to get it working right away, and then make it "correctly" later on. If you run into a similar situation, this will show you how. If you want to do it "the right way", there's comments on the topic here (you can still use the QQuickPaintedItem, but it is not recommended due to its inherent speed penalties - but if you have time constraints on your project, it's a straight forward way to reuse your existing work).

So, what we are talking about here is, of course, the colour selector item that you see a screenshot of above as it looks inside Krita Sketch. Under here you can see what it looks like inside Krita Desktop.

What you can see here is that there is, for all practical intentes and purposes, no difference between the two. The way this was done was, quite simply, to reuse the painting code from the widget without change.

Inside the declarative item there are a couple of bits of code which were unfortunately copied over from the widget version, but the code is reasonably small, so it's not all that much of an issue, to be fair. The code is based around the idea that you have two colour selection parts, the main part, and the sub part. For now we have only got a triangle with a circle around it, but we will be introducing the same modes as found in the desktop version at a later point in time (the code is already there, it simply is not exposed in the user interface yet). This means the paint method is really quite simple: Since the sub-parts already know how to paint themselves using QPainter, we can simply tell them to be painted in the area we have available.

Mouse events are handled very simply and similarly as well (just continue scrolling in that code there ;) ). First, on mouse down, we check whether we're handling foreground or background colours (left or right mouse button), and then we ask the main and sub components which of the two, if any, wants the input. When you then move the mouse, that component is passed the data, and that means you don't accidentally get something picked up elsewhere. As you drag the mouse around on the component, the colour is set, and Calligra's resource system is asked to handle this.

So, very simple approach as you can tell, but one which really does work, and provided some decidedly pleasant and rapid development.

To recap, if you are developing something from new, use the scene graph based drawing methods in Qt Quick 2, but if you have some existing code, you can use this method to produce a nice level of code reuse.


The word of the day is: Reusable