CODEWITHSUNDEEP
qtcanvasscrollviewqml
Dmitry S.
Dmitry S.

Reputation: 13

ScrollView and Canvas in QML

Good day! I'm trying to display multiple charts in different tabs, using Canvas. The scale of the graphs will be somewhat greater than the actual size of the display, so I want to use ScrollView. Have this code in several files:

main.qml:

TabView {
    id: tabView
    Layout.alignment: Qt.AlignCenter
    Layout.fillWidth: true
    Layout.fillHeight: true

    Tab1 {
        id: tab1
    }

    //...
}

Tab1.qml:

Tab {
    active: true

    function init()
    {
        item.plot.requestPaint()
    }

    ScrollView {
        property var plot: _plot
        Plot {
            width: 3000
            id: _plot
        }
    }
}

Plot.qml:

Canvas {
    function draw()
    {
        console.log("draw go")
        var ctx = getContext("2d")
        ctx.reset()

        //...
    }

    onPaint: {
        draw()
    }
}

At some point, the function init() is called.

The problem is that when using ScrollView signal Paint is not called. Without ScrollView everything works well. Errors in the console does not arise.

Qt 5.4.1

Upvotes: 1

Views: 1599

Answers (1)

Mitch
Mitch

Reputation: 24416

You need to give your Canvas a height:

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2

Window {
    id: window
    visible: true
    width: 300
    height: 300

    ScrollView {
        anchors.fill: parent

        Canvas {
            width: 3000
            height: window.height
            onPaint: {
                console.log("draw go")
            }
        }
    }
}

This is a little confusing to me, since the documentation says:

Only one Item can be a direct child of the ScrollView and the child is implicitly anchored to fill the scroll view.

But then it goes on to say:

The width and height of the child item will be used to define the size of the content area.

Which seem like contradictory statements.

Upvotes: 2

Related Questions