根據 qml item 型別 clip 屬性的文件:
可以看到,他描述的是根據 item 的矩形邊框剪下,沒有對圓角或其他異形進行處理。
實測預設效果:
執行上面的**可以看到外層的 radius 並不會對 clip 效果產生影響,因為裡面的色塊還是完整的方形。rectangle
}
效果圖:
或者這樣寫:
opacitymask 也是用 shadereffect 實現的,自己寫著色器要注意的是對不同著色器版本進行相容處理,我這裡只寫了個簡單的沒處理版本問題:import qtquick 2.12
import qtquick.window 2.12
import qtgraphicaleffects 1.0
window
}opacitymask}}
文件提到的 qsgnode 太麻煩,忽略。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() "}}
機智你可能已經發現了,遮罩不僅能實現四個圓角的 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...