自动调整 Canvas 元素

Question

我正在使用 Qt 5.4。我有一个 Qt Quick 项目并且正在使用 QML。由于某些原因，我必须使用 Canvas 元素来绘制树。在某些情况下，我的树比 Canvas 元素 (400x800) 大。所以，我的问题是：如何根据我的树高自动调整 canvas？是否有滚动条或类似的东西？

谢谢！

Answer 1

你可以把你的Canvas放在ScrollView或Flickable里面，例如：

ApplicationWindow {
    width: 200;
    height: 200;
    id: root
    ScrollView {
        anchors.fill: parent
        Flickable {
            anchors.fill: parent
            contentWidth: canvas.width
            contentHeight: canvas.height
            Canvas {
                id: canvas
                width: 300
                height: 300
                property int maxX: 0
                property int maxY: 0
                property var coords: getCoords()

                function getCoords() {
                    var retval = [];
                    for(var i = 0;i < 10;i ++) {
                        var x = Math.round(Math.random() * 1000);
                        var y = Math.round(Math.random() * 1000);
                        retval.push(x);
                        retval.push(y);
                    }
                    return retval;
                }

                onPaint: {
                    var context = canvas.getContext("2d");
                    context.fillStyle = "white";
                    context.fillRect(0,0,canvas.width,canvas.height);
                    context.moveTo(canvas.width / 2, canvas.height / 2);
                    context.strokeStyle = Qt.rgba(0,0,255,0.5);
                    context.lineWidth = 5;
                    context.beginPath();
                    for(var i = 0;i < coords.length;i += 2) {
                        context.lineTo(coords[i],coords[i + 1]);
                        if(coords[i] > maxX) maxX = coords[i];
                        if(coords[i + 1] > maxY) maxY = coords[i + 1];
                    }
                    context.closePath();
                    context.stroke();
                }
                onPainted: {
                    if(canvas.width < maxX || canvas.height < maxY) {
                        canvas.width = maxX;
                        canvas.height = maxY;
                        update();
                    }
                }
            }
        }
    }
}

如果您只需要 Flickable，请删除 ScrollView 项目。 Canvas 将自身更新为最大值 width/height。

自动调整 Canvas 元素

Auto-Fit Canvas element

qt

canvas

qml

html5-canvas