FingerPaint, my 20 minute app

Here's a quick demo of using InkCanvas.

First I create a rectangle to fill the window to make everything white. Then I made an InkCanvas and set the InkWidth to something like a kid would finger paint:

        InkCanvas

        {

            id: inkCanvas

            width:parent.width

            height:parent.height - paintPotSize

            inkWidth: 30

        }

So, now that I have an InkCanvas component, the inking is the easy part. I spent most of the 20 minutes working on the paint color selector.

Those blocks along the bottom are MouseAreas filled with UbuntuShapes. So I just respond to the clicked signal and set the InkCanvas's inkColor property ...

Using a Repeater, I can set them up like this:

        Row

        {

            width: parent.width

            height: paintPotSize

            Repeater

            {

                model: [Qt.rgba(1,0,0,.5), Qt.rgba(0,1,0,.5), Qt.rgba(0,0,1,.5),

                        Qt.rgba(1,1,0,.5), Qt.rgba(1,0,1,.5), Qt.rgba(0,1,1,.5)]

                MouseArea

                 {

                    height: paintPotSize

                    width: paintPotSize

                    onClicked: {inkCanvas.inkColor = modelData}

                    UbuntuShape

                    {

                        anchors.fill: parent

                        color: modelData

                    }

                }

            }

        }

Tada ... a finger paint program suitable for kids to get their grubby mits all over your device in 20 minutes :)

Code is here