QT QML 테두리가있는 사각형에 LinearGradient를 추가하는 방법은 무엇입니까?

Question

Rectangle에 대한 기본 수직선보다 더 구체적인 그래디언트를 갖고 싶습니다. 대각선 효과로 LinearGradient을 추가하려고 시도하지만 테두리를 덮어 씁니다.

이 예제를 고려하십시오. 상단의 세로 그라디언트와 테두리가 Rectangle입니다. 하단 Rectangle 그래디언트가 경계를 덮어 쓰고 radius입니다. clip과 gradient: LinearGradient을 시도했지만 작동하지 않았습니다. 이에

import QtQuick 2.7 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtGraphicalEffects 1.0 

ApplicationWindow 
{ 
    visible: true 
    width: 640 
    height: 480 

    Column 
    { 
     spacing: 20 
     width: parent.width 
     Rectangle 
     { 
      width: 200 
      height: 200 

      border.width: 4 
      border.color: "#888" 
      radius: 10 

      // adds a vertical gradient to button 
      gradient: Gradient 
      { 
       GradientStop 
       { 
        position: 0 
        color: "#eee" 
       } 
       GradientStop 
       { 
        position: 1 
        color: "#ccc" 
       } 
      } 
     } 

     Rectangle 
     { 
      width: 200 
      height: 200 

      border.width: 4 
      border.color: "#888" 
      radius: 10 

      // try to add diagonal gradient, but overwrites button border 
      // also can't do, gradient: LinearGradient ? 
      LinearGradient 
      { 
       anchors.fill: parent 
       start: Qt.point(0,0) 
       end: Qt.point(parent.width,parent.height) 

       gradient: Gradient 
       { 
        GradientStop 
        { 
         position: 0 
         color: "#eee" 
        } 
        GradientStop 
        { 
         position: 1 
         color: "#ccc" 
        } 
       } 
      } 
     } 
    } 
} 

결과 :

I는이 결과가있을 수 있습니다 이유를 볼 수 있지만 어떻게 radius으로 Rectangle에 그라데이션 클립을?

감사합니다.

Answer 1

clip 항상 클리핑되는 Item의 경계 사각형에서 클립하고, alpha 값은 신경 쓰지 않습니다.

그러나 LinearGradient에는 원하는 도구가 모두 포함되어 있습니다.
- source-property.

이 예를 참조하십시오

import QtQuick 2.0 
import QtQuick.Window 2.0 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtGraphicalEffects 1.0 
Window { 
    width: 1024 
    height: 800 
    visible: true 

    Rectangle { 
     id: rect1 
     width: 100 
     height: 100 
     radius: 20 
    } 

    LinearGradient { 
     anchors.fill: rect1 
     source: rect1   <-- Here is where you specify its shape. 
     start: Qt.point(0, 0) 
     end: Qt.point(300, 300) 
     gradient: Gradient { 
      GradientStop { position: 0.0; color: "white" } 
      GradientStop { position: 1.0; color: "black" } 
     } 
    } 
} 

Answer 2

QML은 수직 기울기 만 지원합니다. 항목의 가로 및 세로를 뒤집고 회전하여 가로 그라디언트를 가짜로 만들 수 있습니다.

직사각형도 회전하기 때문에 대각선이 작동하지 않습니다.

클리핑 사용 계획은 QML 스 크ren 그래프가 실제 보이는 픽셀이 아닌 항목의 사각형에만 클립하기 때문에 클리핑을 사용할 계획으로도 작동하지 않습니다. - Canvas 요소를 통해 원하는 결과를 달성하기 위해 노력

1 :

당신이 걸릴 ca를 두 가지 방법이 있습니다.

- 2 ShaderEffect 어떤 그런 다음 실제 쉐이더 상기 제 1 소스 (구배)과 제 (둥근 사각형의 알파에서 RGB를 사용 구배 및 둥근 사각형 함께 ShaderEffectSource 감촉을 전달하는 데 사용)를 사용하여 수동으로 자릅니다.

3 - ShaderEffect을 사용하려는 경우 그라데이션을 소스로 사용하지 않고 쉽게 건너 뛸 수 있으며 GLSL에서 임의의 각도로 그라디언트를 구현하는 방법을 찾고 알파에 대해 둥근 사각형 소스 만 사용하십시오 "둥근"부분은 셰이더에서 구현 될 수 있습니다.