如何实现QML Canvas项高度动态变化时底部固定、从顶部重定位

问题核心是Canvas默认从左上角方向调整高度，要实现底部固定不动、仅顶部调整尺寸，需要从Canvas位置锚定和内部绘图坐标基准两方面修改：

1. 固定Canvas底部位置 #

给Canvas设置垂直锚点，让它的底部和父Item底部对齐，这样高度变化时底部位置保持不变，仅顶部向上收缩/扩展：

Canvas {
    id: mycanvas
    height: canvasHeight
    width: 16
    anchors.bottom: parent.bottom // 关键：锚定父Item底部
}

如果不想用锚定语法，也可以手动计算y坐标实现同样效果：

y: parent.height - canvasHeight

2. 修正Canvas内部绘图坐标 #

之前代码用mycanvas.x/mycanvas.y作为绘图起点，这是Canvas相对于父Item的全局坐标，会导致绘图位置偏移。Canvas内部的绘图坐标系以自身左上角为(0,0)，所以要改成本地坐标：

onPaint: {
    var context = getContext("2d");
    // 使用Canvas自身的本地坐标基准
    var startX = 0;
    var startY = 0;
    context.lineWidth = 0.5;
    context.strokeStyle = "white";

    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(startX, mycanvas.height - 10);
    context.lineTo(mycanvas.width, mycanvas.height);
    context.lineTo(mycanvas.width, startY + 10);
    context.lineTo(mycanvas.width / 2, startY);
    context.closePath();
    context.fill();
    context.stroke();
}

修改后的完整代码 #

Item {
id: barGraph

property int highestRange: 200
property int rangeVal: (RangeModel.rangeValue === "---") ? highestRange : RangeModel.rangeValue
property int totalHeight: 450
property int canvasHeight: (rangeVal * totalHeight) / highestRange

height: 700
width: 500
x: 120
y: 145

Canvas {
    id: mycanvas
    height: canvasHeight
    width: 16
    anchors.bottom: parent.bottom // 锚定底部，高度变化时底部位置固定

    onPaint: {
        var context = getContext("2d");
        var startX = 0;
        var startY = 0;
        context.lineWidth = 0.5;
        context.strokeStyle = "white";

        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(startX,(mycanvas.height - 10));
        context.lineTo(mycanvas.width, mycanvas.height);
        context.lineTo(mycanvas.width, startY + 10);
        context.lineTo(mycanvas.width / 2, startY);
        context.closePath();
        context.fill();
        context.stroke();
    }
}}

调整后，canvasHeight动态变化时，Canvas底部会始终与父Item底部对齐，仅顶部位置随高度调整，完全符合需求。

内容的提问来源于stack exchange，提问作者Bharathi