Monday, April 15, 2013

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

9 comments:

  1. Very nice and informative post thanks a lot for sharing
    clipping path

    ReplyDelete