解決QML中clip對圓角無效的問題

2021-10-21 07:51:10 字數 1861 閱讀 8744

根據 qml item 型別 clip 屬性的文件：

可以看到，他描述的是根據 item 的矩形邊框剪下，沒有對圓角或其他異形進行處理。

實測預設效果：

rectangle


}
執行上面的**可以看到外層的 radius 並不會對 clip 效果產生影響，因為裡面的色塊還是完整的方形。 

效果圖：

或者這樣寫：

import qtquick 2.12


import qtquick.window 2.12


import qtgraphicaleffects 1.0


window 


}opacitymask}}
opacitymask 也是用 shadereffect 實現的，自己寫著色器要注意的是對不同著色器版本進行相容處理，我這裡只寫了個簡單的沒處理版本問題：

import qtquick 2.12


import qtquick.window 2.12


import qtgraphicaleffects 1.0


window 


}shadereffect


property var mask: shadereffectsource


}vertexshader: "


uniform highp mat4 qt_matrix;


attribute highp vec4 qt_vertex;


attribute highp vec2 qt_multitexcoord0;


varying highp vec2 coord;


void main() "


fragmentshader: "


varying highp vec2 coord;


uniform lowp float qt_opacity;


uniform sampler2d source;


uniform sampler2d mask;


void main() "}}
文件提到的 qsgnode 太麻煩，忽略。

機智你可能已經發現了，遮罩不僅能實現四個圓角的 clip，也能實現自己想要的圓角效果（qml 預設四個圓角是統一設定的）：

//右上角

rectangle}}

}}

解決css中z index無效問題

在使用z index這個屬性之前，我們必須先了解使用z index的必要條件 1 要想給元素設定z index樣式，必須先讓它變成定位元素，說的明白一點，就是要給元素設定乙個postion relative 定位元素 position屬性值設定除預設值static以外的元素，包括relative，a...

android中suid無效解決方法

設定了suid的程式不能放置在掛載為nosuid的目錄下，如果你堅持要把檔案放在那個目錄的話只能重新掛載，可按如下步驟重新掛載 以 data目錄為例，首先用mount命令檢視該目錄的掛載資訊，可見其中有乙個nosuid，表明在此目錄下suid無效 然後使用mount o remount,suid d...

解決CSS中z index無效的情況

在使用z index這個屬性之前，我們必須先了解使用z index的必要條件 1 要想給元素設定z index樣式，必須先讓它變成定位元素，說的明白一點，就是要給元素設定乙個postion relative 定位元素 position屬性值設定除預設值static以外的元素，包括relative，a...