이미지 나누기에 마스크 적용

이미지에 마스크를 적용하여 원형으로 만들 때마다 UI 요소 정렬이 끊어집니다. 이미지는 몇 픽셀 씩 오른쪽으로 오프셋됩니다. 내가 RoundedImageImage에 변경 이미지 나누기에 마스크 적용

// main.qml 
import QtQuick 2.8 
import QtQuick.Controls 2.1 
import QtQuick.Layouts 1.1 

ApplicationWindow { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Example") 

    Page1Form { 

    } 
} 

// Page1Form.qml 
import QtQuick 2.8 
import QtQuick.Layouts 1.1 
import QtQuick.Controls 2.1 

Item { 
    RowLayout { 
     id: playerRowLayout 

     Layout.alignment: Qt.AlignLeft 

     Layout.fillWidth: true 

     RoundedImage { 
      id: displayImage 

      width: 50 
      height: 50 

      Layout.preferredWidth: 50 
      Layout.preferredHeight: 50 

      source: "Images/DisplayPicture.jpeg" 

      sourceSize.width: width 
      sourceSize.height: height 
     } 

     Text { 
      id: playerText 
      text: qsTr("Hameer Abbasi (Pro)") 
      font.family: "Source Sans Pro" 
      font.pixelSize: 12 
     } 
    } 
} 

// RoundedImage.qml 
import QtQuick 2.8 
import QtGraphicalEffects 1.0 

Image { 
    id: img 
    property bool rounded: true 
    property bool adapt: true 

    layer.enabled: rounded 
    layer.effect: OpacityMask { 
     maskSource: Rectangle { 
      anchors.centerIn: parent 
      width: adapt ? img.width : Math.min(img.width, img.height) 
      height: adapt ? img.height : Math.min(img.width, img.height) 
      radius: Math.min(width, height)*0.5 
     } 
    } 
}

, 어긋남이 같은 사라 : 나는 OpacityMask에 anchors.fill: img 또는 anchors.centerIn: img를 추가 할 때

또한

, 내가 얻을 다음 결과 (볼 수 있듯이 정렬이 사라지지 않았지만 방금 이동 됨) :

가이 텍스트 상자에 anchors.right: displayImage.left 설정되어 작동하는 것,하지만 어떻게 든 해킹 것 같아 내가 바로 어떻게 든 뭔가를하고 있지 않다 같은 느낌 않는다는 것을 유일한 것은. 누군가가 내가 문제의 위치와 문제를 해결할 수있는 "적절한"방법을 파악하는 데 도움을 줄 수 있습니까?

출처

2017-05-09 Hameer Abbasi

'width'와'Layout.preferredWidth' (각각의 높이)를 함께 사용하면 안된다고 생각합니다. 효과의 ['sourceRect'] (http://doc.qt.io/qt-5/qml-qtquick-item.html#layer.sourceRect-prop) 설정을 고려하십시오. – derM

der.m 'layer.sourceRect : img.childrenRect'를 추가해도 문제가 해결되지 않았습니다. 그것이 당신이 의도 한 것이 었는지 나는 확신하지 못합니다. –

그런 것. 방금 나 자신을 시험해 볼 시간을 찾았습니다. 정말로 신비 스럽습니다 ... 잘 모르겠습니다 - 레이아웃 물건을 떨어 뜨려 앵커링과 정상적인'Row's 대신 사용할 수 있습니까? – derM

설명해 드릴 수 없습니다. 이유가이 일이 일어나고 있습니다. 나에게 그것은 벌레처럼 보인다.

쉽게 해결 방법이 있습니다. 안에 Image을 직접 넣지 마십시오. RoundedImage.qml을 다음으로 변경하십시오.

// RoundedImage.qml 
import QtQuick 2.7 
import QtGraphicalEffects 1.0 

Item { 
    id: img 
    property bool rounded: true 
    property bool adapt: true 
    property alias source: image.source 
    property alias sourceSize: image.sourceSize 
    Image { 
     id: image 

     width: img.width 
     height: img.height 
     layer.enabled: rounded 
     layer.effect: OpacityMask { 
      maskSource: Rectangle { 
       width: adapt ? img.width : Math.min(img.width, img.height) 
       height: adapt ? img.height : Math.min(img.width, img.height) 
       radius: Math.min(width, height)*0.5 
      } 
     } 
    } 
}

이상한 동작이 사라졌습니다.

출처

2017-05-09 19:06:34 derM

이미지 나누기에 마스크 적용

답변

관련 문제