pyside6 qml 支持更新液位的伪 3D 圆柱

2022-11-05
美国
本文字数：1639 字
阅读完需：约 5 分钟

利用 Shape 来绘制，以前基于 Canvas 实现过类似的控件，但是 Canvas 要 requestPaint 触发液面的更新，而且有重影，性能也不如 Shapes。

思路就是绘制两层圆柱

外面的一层是瓶身

里面的一层是液体

import QtQuick 2.15import QtQuick.Controls 2.15import QtQuick.Shapes 1.6
Shape {    id: root    property color color: "#A0333666"    property int percentage: 100
    width: 52    height: 58
    //多重采样抗锯齿    layer.enabled: true    layer.samples: 8        //平滑处理    smooth: true
    //默认抗锯齿    antialiasing: true
    ShapePath {        fillColor: color        startX: 0        startY: root.width/8        fillRule: ShapePath.WindingFill
        PathLine {            x: 0            y: root.height - root.width/8        }
        PathCubic {            x: root.width; y: root.height - root.width/8            relativeControl1X: root.width/10; relativeControl1Y: root.height/10            relativeControl2X: 9*root.width/10; relativeControl2Y: root.height/10        }
        PathLine {            x: root.width            y: root.width/8        }
        PathCubic {            x: 0; y: root.width/8            relativeControl1X: -root.width/10; relativeControl1Y: -root.height/10            relativeControl2X: -9*root.width/10; relativeControl2Y: -root.height/10        }    }
    ShapePath {        fillColor: "#00FA9A"        startX: 0        startY: root.width/8 + (root.height - root.width/4)*(1 - percentage/100)        fillRule: ShapePath.WindingFill
        PathLine {            x: 0            y: root.height - root.width/8        }
        PathCubic {            x: root.width; y: root.height - root.width/8            relativeControl1X: root.width/10; relativeControl1Y: root.height/10            relativeControl2X: 9*root.width/10; relativeControl2Y: root.height/10        }
        PathLine {            x: root.width            y: root.width/8 + (root.height - root.width/4)*(1 - percentage/100)        }
        PathCubic {            x: 0; y: root.width/8 + (root.height - root.width/4)*(1 - percentage/100)            relativeControl1X: -root.width/10; relativeControl1Y: root.height/10            relativeControl2X: -9*root.width/10; relativeControl2Y: root.height/10        }
        PathCubic {            x: root.width; y: root.width/8 + (root.height - root.width/4)*(1 - percentage/100)            relativeControl1X: root.width/10; relativeControl1Y: -root.height/10            relativeControl2X: 9*root.width/10; relativeControl2Y: -root.height/10        }
        PathCubic {            x: 0; y: root.width/8 + (root.height - root.width/4)*(1 - percentage/100)            relativeControl1X: -root.width/10; relativeControl1Y: root.height/10            relativeControl2X: -9*root.width/10; relativeControl2Y: root.height/10        }    }
    Text {        text: percentage.toString() + "%"        anchors {            centerIn: parent        }    }
    Timer {        id: countDownTimer        interval: 100        running: true        repeat: true        onTriggered: {            percentage -= 1;            if (percentage <= 0) {                countDownTimer.stop();            }        }    }}