Krita Sketch is: Rounded

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 is gearing up towards a 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.

There are two things in Krita Sketch which are rounded, and i will be covering the first of these in this entry. The first is the simple rounded corners in various places around the application, which are done in three ways (that i will get back to in a moment), and the other is the colour selector, which is an entirely different matter. That one will be covered in the next entry.

So, rounded corners in QML, how do you do that? Well, in reality it really is quite simple, but i thought i would spend a little while talking about it anyway. In addition to just using a set of Images manually, lining them op as appropriate (which we did in a lot of places), you have two options when making them, depending on precisely what you are trying to do.

Pure QML painting

The first option is to use the radius option on a Rectangle item. A very simple approach, which does however come with one caveat, which is not the radius itself, but rather a problem of how borders work in Qt in general (it will also be known to people who work with WebKit, which behaves in the same way). Shortly, borders are painted on the centre of the element's edge, rather than on either side of it. If you are aware of this, it is easy enough to work with, but you must be aware of the behaviour for it all to make sense.

Using the radius property means that all four corners on the element will be rounded a number of pixels equal to that radius. Easy to work with. Except in the case where you only want some of your corners to be rounded. We have not used this trick in Krita Sketch, but it's a useful trick to know: Use the Item item's clipping property, fill it with your rounded-cornered Rectangle, and make that Rectangle larger than the Item by way of adding negative margins in the appropriate places. For example, the following code will give you a blue rectangle with the two top corners rounded:

BlueRectangle.qml:


import QtQuick 1.0
Item {
    Item {
        width: 50;
        height: 50;
        anchors.centerIn: parent;
        clip: true;
        Rectangle {
            anchors {
                fill: parent;
                bottomMargin: -radius;
            }
            radius: 10;
            color: "blue";
        }
    }
}


A total hack? Yes, absolutely. But it works a treat :)

The BorderImage Compoment

The solution we should have used in Krita Sketch in the majority of cases was the BorderImage component. A very simple but extremely powerful component, which shortly takes an image, cuts it into nine slices according to what's set in your border property, and arranges those slices according to your desire (scaling and tiling according to the settings you choose). The documentation for this component is extensive and well written, so i won't talk about this other than saying it is very powerful.

An important thing, however, is to make sure that you know it exists. It is a non-obvious thing to have available, and if you do not know it's there you'll find yourself reinventing a lot of things and doing a lot of manual cutting which, on mobile devices in particular, means that you are using more texture space than you should. In our case this is not any serious cost (we have a LOT of images in memory already, and not using this component does not seriously impact on this), but if you are targeting mobile devices, in particular the smaller variety (smartphones), make sure you're not reinventing the wheel here.

The word of the day is: Squircle