1

我有一个背景凹槽图像

为此我必须使用进度填充图像产生进度条效果

如何沿进度条凹槽的路径剪切进度填充图像（背景凹槽图像）。目前我正在尝试进行横向剪裁，但这不是我想要的。如我的代码的路径插值器中所述，剪切应该垂直于路径。代码中“RPM_BG.png”是背景凹槽图像，其形状与“RPM_Fill.png”（进度填充图像）相似。

import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.4
import QtMultimedia 5.0
import QtQuick.Controls.Styles 1.4
Window {
    visible: true
    color:"black"
        width: 357
        height: 221+200


        Image
        {
            id:groove1
            source:"qrc:/RPM_BG.png"
            anchors.top:parent.top
            anchors.left:parent.left

            Item{
                        id: displayWindow1
                        height: parent.height 
                         width: (225*(slider.value)/8000)+32


                        clip: true

                            anchors.bottom: parent.bottom
                            anchors.left: parent.left
                            anchors.right:needle.right
                            anchors.rightMargin:/*8*/{switch(true)
                            {
                                case slider.value>=0 && slider.value < 111:return 10;
                                case slider.value>=111 && slider.value < 124:return 9.7;
                                case slider.value>=124 && slider.value < 132:return 8.4;
                                case slider.value>=132 && slider.value < 135:return 8;
                                case slider.value>=135 && slider.value <= 165:return 7.15;
                                case slider.value>=165 && slider.value <= 240:return 6;

                                }
                            }

                        Image
                        {
                            id:speedarcfill
                            anchors.top:parent.top
                            anchors.left:parent.left
                            source:"qrc:/RPM_Fill.png"
                            z: 1
                        }
                    }

        PathInterpolator {
            id: motionPath
            property int value

            path: Path {
                startX: 27; startY: 189
                PathLine { x: 98; y: 54 }
                PathArc { x: 176; y: 12; radiusX: 90; radiusY: 90 }
                PathLine { x: 245; y: 11 }
            }
            progress:slider.value/8000
        }
        }

        Slider {
                    id: slider
                    anchors.top:groove1.bottom
                    anchors.topMargin:100
                    anchors.left:parent.left
                    anchors.leftMargin: 5
                    width: parent.width-10
                    height: 100

                    style: SliderStyle {
                        handle:
                            Rectangle {
                                        anchors.centerIn: parent
                                        color: control.pressed ? "white" : "lightgray"
                                        border.color: "gray"
                                        implicitWidth: 10
                                        implicitHeight: 40
                                    }

                        groove: Rectangle {
                            width: slider.width
                            height: 10
                            color:"black"

                            LinearGradient {
                                anchors.verticalCenter: parent.verticalCenter
                                start: Qt.point(0, 0)
                                end: Qt.point(parent.width, 0)
                                width: styleData.handlePosition
                                height: 10

                                gradient: Gradient {
                                    GradientStop {position: 0.0; color: "#008BFF" }
                                    GradientStop {position: 0.5; color: "#3FFFD0" }
                                    GradientStop { position: 1.0; color: "#3FFF41" }
                                }
                            }
                        }

                    }

                    maximumValue: 8000

                }

    }

请为我建议一种方法，以便我可以垂直于进度路径剪辑进度填充图像。

4

1 回答 1

2

您可以为此使用基本的片段着色器。就像是：

ShaderEffect {
        id: displayWindow2
        height: groove1.height
        width: groove1.width
        anchors.top: parent.top
        anchors.right: parent.right

        property var base: groove1
        property var overlay: speedarcfill
        property real pointX: motionPath.x/width
        property real pointY: motionPath.y/height
        property real pointAngle: (motionPath.angle  + 90)%360

        fragmentShader: "
        uniform sampler2D base;
        uniform sampler2D overlay;
        varying highp vec2 qt_TexCoord0;
        uniform lowp float qt_Opacity;
        uniform highp float pointAngle;
        uniform highp float pointX;
        uniform highp float pointY;
        void main() {
            lowp vec4 baseTex = texture2D(base, qt_TexCoord0.st);
            lowp vec4 overlayTex = texture2D(overlay, qt_TexCoord0.st);
            //line equation => (y - y1)/(x - x1) = slope ; slope != infinity
            highp float angle = radians(pointAngle);
            highp float slope = tan(angle);
            highp float deltay = qt_TexCoord0.y - pointY;
            highp float deltax = qt_TexCoord0.x - pointX;

            //If overlay is transparent, get the texture from base
            if(overlayTex.a > 0.0)
            {
                //check where the current point lies, wrt the normal.
                if( ( slope >= 0.0 && deltay - deltax*slope > 0.0 ) || (slope < 0.0 && deltax < 0.0))
                    gl_FragColor = overlayTex * qt_Opacity;
                else gl_FragColor = baseTex*qt_Opacity;
            }
            else gl_FragColor = baseTex*qt_Opacity;
        }"
    }

这是完整的文件，我玩过写这个：https ://bpaste.net/show/2b0c0fd1cc69

于 2017-05-27T21:36:22.817 回答