0 votesclick to vote up

Rick Spencer: Introducing InkCanvas Published Apr 16 2013 via RSS

planetUbuntu

So, I drew a beard on Tard today!  Furthermore, I did it with just a few lines of QML. Here's the whole program for drawing on Tard ...

MainView {

    // objectName for functional testing purposes (autopilot-qt5)

    objectName: "mainView"

    applicationName: "InkArea"

    width: units.gu(100)

    height: units.gu(75)

    Image

    {

        source: "grumpycat.jpg"

        anchors.fill: parent;

        fillMode: Image.PreserveAspectFit

    }

    InkCanvas

    {

        anchors.fill: parent

        inkColor: Qt.rgba(0, 0, 0)

        inkWidth: 15

    }

}

I just added an InkCanvas to my MainView and covered the Image with it. Simple, right? Well, you may have guessed there is slightly more to it than that. Where did InkCanvas come from? InkCanvas is a custom component that I wrote in pure QML to allow users to draw an a surface.

You may be aware of my long interest in free from editing applications. Remember Photobomb?

So, I decided to try my hand at collecting Ink in QML. There was some surprising complexity in getting it to work and work quickly, and it is still very much a work in progress. None the less, I want to invite people to:

• Download and use InkCanvas in their apps if they want. I hope it unlocks some fun things for people to do.
• Contribute to making InkCanvas better. Extend it, fix it, break it, etc...

Note that it currently doesn't work perfectly on my Nexus7. Something seems to break the canvas when Ink starts getting drawn :(

I logged a bug about this, but for all I know, it has something to do with the way I am abusing the Canvas and Stroke Components. Though it does work fine on my desktop.