[Filip]

Hi,

I'm trying to make a small paint application with QML/Felgo, 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...
            }
        }
    }

 

[AlexFelgo 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 9 years ago by  Alex.

[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

[GüntherFelgo 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 8 years, 8 months ago by  GT.

[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);
}

[GüntherFelgo 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 8 years, 8 months ago by  GT.

[AlexFelgo 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 8 years, 8 months ago by  Alex.
• This reply was modified 8 years, 8 months ago by  Alex.

[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?

[GüntherFelgo 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?

[Phil]

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