Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Paint with Qml
Forum Updated to NodeBB v4.3 + New Features

Paint with Qml

Scheduled Pinned Locked Moved QML and Qt Quick
16 Posts 3 Posters 11.9k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Y Offline
    Y Offline
    yan_
    wrote on last edited by
    #1

    Hi.

    I would like draw an image and display it with QML.
    But i don't find painter, canvas, image, ... to build it.
    Do you know if its possible? Maybe in a futur version?

    "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
    "QEXtend Video":http://www.youtube.com/user/QEx...

    1 Reply Last reply
    0
    • ? This user is from outside of this forum
      ? This user is from outside of this forum
      Guest
      wrote on last edited by
      #2

      if i understand correctly, u want qml to display an image? is it right or ... ?

      1 Reply Last reply
      0
      • Y Offline
        Y Offline
        yan_
        wrote on last edited by
        #3

        No. I want manipulate an image pixel by pixel.
        Somethig like this example :
        "http://doc.qt.nokia.com/4.7-snapshot/script-context2d.html":http://doc.qt.nokia.com/4.7-snapshot/script-context2d.html

        Directly with QML.

        [edit: fixed hyperlink / $chetankjain ]

        "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
        "QEXtend Video":http://www.youtube.com/user/QEx...

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mbrasser
          wrote on last edited by
          #4

          Hi,

          Pixel-level manipulations from QML aren't possible with any of the elements shipped in 4.7. You could try writing your own element that does this (the "Writing QML extensions with C++":http://doc.qt.nokia.com/4.7-snapshot/qml-extending-tutorial-index.html tutorial gives a good overview of this), or have a play with the (possibly out of date) painter element at "http://gitorious.org/qml-painterplugin":http://gitorious.org/qml-painterplugin.

          Regards,
          Michael

          1 Reply Last reply
          0
          • Y Offline
            Y Offline
            yan_
            wrote on last edited by
            #5

            Thank for information.

            I test a funny possibility with WebView and it's evaluateJavaScript method to manipulate html5 canvas in QML :D
            It's work but code is not fully QML and i don't find how de-activate WebView right mouse key.

            qml-painterplugin could be very interesting.

            "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
            "QEXtend Video":http://www.youtube.com/user/QEx...

            1 Reply Last reply
            0
            • J Offline
              J Offline
              Jens
              wrote on last edited by
              #6

              I tried out something similar, but use a html5 context directly in QML without using a webview.

              You can try it out here:
              "http://gitorious.org/qmlcanvas/qmlcanvas":http://gitorious.org/qmlcanvas/qmlcanvas

              [edit: fixed hyperlink / $chetankjain]

              1 Reply Last reply
              0
              • Y Offline
                Y Offline
                yan_
                wrote on last edited by
                #7

                Your example are very impressive !!!!

                If i understand you code, you create an object which propose html5 canva interface and use it to draw.

                You use Context2D example?

                "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
                "QEXtend Video":http://www.youtube.com/user/QEx...

                1 Reply Last reply
                0
                • J Offline
                  J Offline
                  Jens
                  wrote on last edited by
                  #8

                  Thanks. Yes I used that as a starting point. I have a different approach too, one that doesn't require a paint method but can give you access to the context object from anywhere, like in html5. But I think this onPaint signal is a simpler use case.

                  1 Reply Last reply
                  0
                  • Y Offline
                    Y Offline
                    yan_
                    wrote on last edited by
                    #9

                    Interesing feature could be capability :

                    • to use context in a thread with WorkerScript éléments.
                    • to redraw on last paint

                    "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
                    "QEXtend Video":http://www.youtube.com/user/QEx...

                    1 Reply Last reply
                    0
                    • Y Offline
                      Y Offline
                      yan_
                      wrote on last edited by
                      #10

                      I've modified context2D from your code and i make 2 new examples with chromeExperience example code. I think you will be interested ^^
                      "qmlcanvas-modified":http://ftp-developpez.com/yan-verdavaine/qml-canvas/qmlcanvas-modified.7z

                      "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
                      "QEXtend Video":http://www.youtube.com/user/QEx...

                      1 Reply Last reply
                      0
                      • J Offline
                        J Offline
                        Jens
                        wrote on last edited by
                        #11

                        yah_: really cool! I want some more examples showing mixing qml and canvas though and not just show pure javascript apps.

                        I modified the canvas so its possible (but less optimal) to paint outside the paintEvent now so you may have to do a few changes. Now that I get contributions and some attention within Nokia I think I will re-host my example to allow for accepting contributions and perhaps keep the examples in a separate repository. That way you can hopefully assign copyright and I can merge your changes upstream if you are interested?

                        1 Reply Last reply
                        0
                        • Y Offline
                          Y Offline
                          yan_
                          wrote on last edited by
                          #12

                          [quote author="Jens" date="1283848465"]yah_: really cool! I want some more examples showing mixing qml and canvas though and not just show pure javascript apps.[/quote]
                          Few other chrome example could be adapted from "chromeexperiments":http://www.chromeexperiments.com/
                          like "plasmatree":http://www.chromeexperiments.com/detail/plasmatree/

                          [quote author="Jens" date="1283848465"]That way you can hopefully assign copyright and I can merge your changes upstream if you are interested?[/quote]
                          You can get changes of course. But it must be cleaned (i do it with an axe ^^).
                          I'll begin a qml plugin for "QExtend":http://gitorious.com/qextend#more lib and i'll begin with Context2D too.

                          With last result, create HTML5 canvas api to qml is a very powerful feature.

                          It's interested to see that QPainter and HTML5 canvas api are very similare

                          "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
                          "QEXtend Video":http://www.youtube.com/user/QEx...

                          1 Reply Last reply
                          0
                          • J Offline
                            J Offline
                            Jens
                            wrote on last edited by
                            #13

                            If I create an official Qt Labs repository the project might end up in Qt itself just like Rectangle and Text elements. If you are interested in cleaning up the patch and submitting merge requests after that let me know and I'll send you the new link once its available.

                            1 Reply Last reply
                            0
                            • Y Offline
                              Y Offline
                              yan_
                              wrote on last edited by
                              #14

                              I begin plugin for QExtend. Result are really cool. If you want "look video":http://www.developpez.net/forums/d906429-2/c-cpp/bibliotheques/qt/qextend-sortie-v0-0-1-a/#post5457024

                              If you are intrested, i've add a global Object from plugin which give setTimeout and setInterval function. So plamaTree example work with very small change :D

                              You can get code with svn on "http://subversion.developpez.com/projets/qextend/branches/dev":http://subversion.developpez.com/projets/qextend/branches/dev

                              [quote]If I create an official Qt Labs repository the project might end up in Qt itself just like Rectangle and Text elements. If you are interested in cleaning up the patch and submitting merge requests after that let me know and I’ll send you the new link once its available.[/quote]
                              When our dev become mature, merge our version could be very interesting.

                              [edit: fixed hyperlink / $chetankjain]

                              "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
                              "QEXtend Video":http://www.youtube.com/user/QEx...

                              1 Reply Last reply
                              0
                              • J Offline
                                J Offline
                                Jens
                                wrote on last edited by
                                #15

                                Hey I wanted to let you know that I now have an official Qt repository for my qmlcanvas.
                                It would be great if you posted merge requests for the features you added. Otherwise I will have to duplicate these efforts. This way they can become part of the official Qt. I also started working on an initial test framework so we can start work towards stability.

                                "http://qt.gitorious.org/qt-labs/qmlcanvas":http://qt.gitorious.org/qt-labs/qmlcanvas

                                [edit: fixed hyperlink / $chetankjain]

                                1 Reply Last reply
                                0
                                • Y Offline
                                  Y Offline
                                  yan_
                                  wrote on last edited by
                                  #16

                                  If i found time, i'll help you. But actually it's just for fun. It's to study qml and i'm not sure canvas api interest people. Anymore, i write another plugin with another approach with a begin of webGl api support.
                                  I think it's better to develop different approach and merge later.

                                  "If you want look new Video":http://www.developpez.net/forums/d906429-2/c-cpp/bibliotheques/qt/qextend-sortie-v0-0-1-a/#post5459209

                                  "QExtend":http://www.developpez.net/forums/d906429/c-cpp/bibliotheques/qt/naissance-projet-qextend/
                                  "QEXtend Video":http://www.youtube.com/user/QEx...

                                  1 Reply Last reply
                                  0

                                  • Login

                                  • Login or register to search.
                                  • First post
                                    Last post
                                  0
                                  • Categories
                                  • Recent
                                  • Tags
                                  • Popular
                                  • Users
                                  • Groups
                                  • Search
                                  • Get Qt Extensions
                                  • Unsolved