To solve this, I use a ListView to divide the area in segments, 8.000 pixel each.
ListView {
id: graphicView
anchors.fill: parent
orientation: Qt.Horizontal
spacing: 0
// always repaint items on scroll
reuseItems: false
// the width of the scrollable area
readonly property real displayWidth: 64000
// define a max width for segmentation to avoid the contentWidth limitation of qml
readonly property int segmentWith: 8000
readonly property int segmentCount: Math.max(1, Math.round(displayWidth / segmentWith))
onSegmentCountChanged: {
console.log("OsziGraphic: displayWidth = " + displayWidth + ", segmentCount = " + segmentCount);
}
model: graphicView.segmentCount
delegate:
OsziGraphicViewModel {
height: ListView.view.height
width: graphicView.displayWidth / graphicView.segmentCount
segmentIndex: index
}
}
In the backend I inherit from QQuickPaintedItem to add properties for the current segment index and the render area to draw in. I translate the rendered coordinates to draw as if the entire area is used.
void QQuickSegmentedPaintedItem::paint(QPainter *painter)
{
if (m_segmentIndex == -1)
return;
// calculate the current render rect inside the drawing area
m_renderRect = QRect(m_segmentIndex * boundingRect().width(), 0, boundingRect().width(), boundingRect().height());
// move the drawing area relative to the current render area
painter->translate(-m_renderRect.left(), 0);
}
This works nicely for my needs. I hope you get the idea.
cheers!