如何在QML

Question

沿特定路徑剪輯圖像我有一個背景槽圖像

針對我有使用進度填充圖片以產生進度條效果

如何沿進度條凹槽的路徑（背景凹槽圖像）剪切進度填充圖像。 目前我正在嘗試做橫向剪裁，但它不是我想要的。裁剪應該垂直於我的代碼的路徑插值器中提到的路徑。 代碼「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 

       } 

    } 

請給我提出一個方法，這樣我可以剪輯進度填充圖像垂直於前進的道路。

Answer 1

您可以爲此使用基本片段着色器。喜歡的東西：

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