qt - QML - Opacity of stacked elements -
i have 2 items stacked. both items have semi-transparent background. circle shows the rounded rect below.
is there way can hide part of long rounded rect overlaps circle? maybe changing parent, background of circle pulled ancestor higher up, , therefore ignoring rect below it?
here code:
item { id: choice1 width: 300 height: 100 rectangle { id: choicelabel1 width: 0 height: parent.height / 1.5 radius: parent.height * 0.5 color: "#88808080" anchors { verticalcenter: choice1.verticalcenter left: choice1.left leftmargin: choiceicon1.width / 2 } border { width: 2 color: "red" } } rectangle { id: choiceicon1 width: choice1.height height: choice1.height radius: width * 0.5 color: "#88808080" anchors { verticalcenter: choice1.verticalcenter left: choice1.left } border { width: 2 color: "red" } } }
a solution, albeit bit hacky implement own qml multirectangle component, allow set opacity , draw border around bunch of qml rectangle
multirectangle.qml
import qtquick 2.0 item { id: root layer.enabled: true property int borderwidth: 2 property color bordercolor component { id: rectangle rectangle{} } component.oncompleted:{ var temp = children.length for(var i=0; i<temp; i++) rectangle.createobject(this, { "z":-100, "anchors.centerin": children[i], "color": bordercolor, "width": children[i].width+borderwidth*2, "height": children[i].height+borderwidth*2, "radius": math.max((children[i].height+borderwidth*2) /children[i].height*children[i].radius, (children[i].height+borderwidth*2) /children[i].height*children[i].radius) }) } } this dynamically create pseudo border behind rectangles added multirectangle item.
example
import qtquick 2.5 import qtquick.window 2.2 import qtgraphicaleffects 1.0 window { id: root visible: true height: 200 width: 400 radialgradient { anchors.fill: parent gradient: gradient { gradientstop { position: 0.0; color: "white"} gradientstop { position: 0.3; color: "#444"} gradientstop { position: 1; color: "white"} } } multirectangle { anchors.centerin: parent width: 300 height: 100 borderwidth: 2 bordercolor: "red" opacity: 0.5 rectangle { color: "cyan" anchors.verticalcenter: parent.verticalcenter anchors.left: parent.left anchors.leftmargin: parent.borderwidth height: parent.height - 2 * parent.borderwidth width: height radius: height / 2 } rectangle { color: "cyan" anchors.horizontalcenter: parent.horizontalcenter anchors.margins: parent.borderwidth anchors.top: parent.top height: 10 width: height radius: height / 2 } rectangle { color: "cyan" anchors.horizontalcenter: parent.horizontalcenter anchors.horizontalcenteroffset: 30 anchors.margins: parent.borderwidth anchors.top: parent.top height: 30 width: height radius: height / 2 } rectangle { color: "cyan" anchors.verticalcenter: parent.verticalcenter anchors.left: parent.left anchors.leftmargin: 50 height: parent.height * 0.6 anchors.right: parent.right anchors.margins: parent.borderwidth radius: height / 2 } } } result
note since layer.enabled set true, clip set true. therefore, border of child items close multirectangle bounds clipped.
Comments
Post a Comment