Forums

OverviewV-Play 2 Support (Qt 5) › Problem creating dynamic path

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #9051

    Filip
    Hi,
    
    I'm trying to make a small paint application with QML/V-Play, but I'm having problems adding paint strokes to the Path object. I tried adding the newly created newPathElement to myPath.pathElements in different ways, but nothing seems to work. How can I achieve this?
    
    Thanks!
    
        Canvas {
            width: 400; height: 200
            contextType: "2d"
    
            Path {
                id: myPath
                startX: 0; startY: 100
    
            }
    
            onPaint: {
                context.strokeStyle = Qt.rgba(.4,.6,.8);
                context.fillStyle = Qt.rgba(1.0, 1.0, 1.0, 1.0);
                context.lineWidth = 5.0;
                context.path = myPath;
                context.stroke();
            }
    
            MouseArea {
                anchors.fill: parent
                property string sc: 'import QtQuick 2.0; PathCurve {}'
                onPositionChanged: {
                    var newPathElement = Qt.createQmlObject(sc, myPath, "curve");
                    newPathElement.x = mouse.x;
                    newPathElement.y = mouse.y;
                    // ???????????????? myPath.pathElements.push() doesn't work...
                }
            }
        }

     

    #9061

    Alex
    V-Play Team

    Hi,

    you could also have a look at this pretty nice paint example: http://qmlbook.github.io/en/ch07/index.html#canvas-paint

    Maybe that works better than the Path approach.

    Keep in mind that the content scaling mechanism of the Scene might interfere with the Canvas, so consider using the Canvas without a wrapping Scene.

    Let me know if this helps you.

    Cheers,
    Alex

    • This reply was modified 3 years, 3 months ago by  Alex.
    #9829

    Phil

    Hi Alex. I’m trying to implement the canvas you linked to, but I can’t change the canvas colour to anything other than white. Do you know how to do this? Thanks, Phil

    #9833

    Günther
    V-Play Team

    Hi,

    the Canvas is actually not white but transparent. You can add other elements (e.g. a colored Rectangle) just below the Canvas to get another background.

    With this you can add a black Rectangle as a Background for the Canvas:

        Rectangle {
          anchors.fill: canvas
          color: "black"
        }
    
        Canvas {
          id: canvas
          // ...  
        }

     

    Regards,
    GT

    • This reply was modified 2 years, 11 months ago by  GT.
    #9838

    Phil

    Ok, thanks. I’ve realised what’s causing the problem now. I’ve set the drawn path to fade out using the following code, but it’s not a true fade out, it just covers over the path with a white rectangle, and so my background disappears. Is there a simple work-around for this?

    function blank(context) {
        context.fillStyle = Qt.rgba(255,255,255,0.1)
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
    #9839

    Günther
    V-Play Team

    I’m sorry to say, that I also don’t have a good solution for you as this is QML specific problem. :(

    The only thing I can think of is to prepare an Image, that is exactly a faded version of your background.
    You could then draw this image over your painted lines in your blank()-function instead of the rectangle.

     

    Maybe you can also find an answer by asking in the official Qt forums.

    Cheers,

    GT

    • This reply was modified 2 years, 11 months ago by  GT.
    #9841

    Alex
    V-Play Team

    While i haven’t tried it yet, maybe

    context.clearRect(0, 0, canvas.width, canvas.height);
    

    does help?

    And if you want to create your fade-out effect, just fade out the whole canvas via its opacity property, when its hidden clear it, and then show it again.

    Cheers,
    Alex

    • This reply was modified 2 years, 11 months ago by  Alex.
    • This reply was modified 2 years, 11 months ago by  Alex.
    #9845

    Phil

    Yes, that works. Thanks!

     

    I’ve now tried running it on Android and there’s quite a bit of lag, even without the fade out effect. Is this normal?

    #9846

    Günther
    V-Play Team

    For me, the performance is similar (good) on android and desktop.

    It also works fine with the applied fade-out effect.

     

    I think it shouldn’t be that laggy for simply drawing a line. Did you change anything else in the canvas code except the fade-out?

    #9856

    Phil

    I haven’t changed anything in the code. Maybe it’s just the device I’m using.

Viewing 10 posts - 1 through 10 (of 10 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support