[英]Making a portion of Rectangle disapear/invisible QML Qt
I'm making a custom GroupBox in QML and currently I have this 我正在QML中制作一个自定义GroupBox,目前我有这个
Rectangle
{
anchors.fill: parent
color: "#55aaff"
Rectangle
{
id: combo_box
anchors.centerIn: parent
color: "transparent"
width: parent.width/2
height: parent.height/2
opacity: 0.3
Rectangle
{
anchors.fill: parent
color: "transparent"
border.color: "#ffffff"
border.width: 1
radius: 20
}
}
Rectangle
{
id: combo_box_title
anchors.verticalCenter: combo_box.top
anchors.left: combo_box.left
anchors.leftMargin: 30
width: 90
height: 20
opacity: 0.3
color: "#55aaff"
}
Text
{
id: combo_box_title_text
anchors.centerIn: combo_box_title
font.family: "Comic Sans MS"
font.pointSize: 9
color: "#e1e100"
text: "Game Settings"
}
You can see my ComboBox title has the Rectangle's border in the background. 您可以看到我的ComboBox标题在背景中具有矩形的边框。 All I want is to remove the part of Rectangle's border that lies behind Title.
我要删除的是Rectangle边框中Title后面的部分。
Is there a solution to my problem? 我的问题有解决方案吗? Or any other way I can have this kind of GroupBox.
或任何其他方式,我可以拥有这种GroupBox。 Thanks in advance
提前致谢
You replace the Rectangle
with the white border with the Canvas
: 用
Canvas
将白色边框替换为Rectangle
:
Canvas {
id: mycanvas
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(120, 0);
ctx.lineTo(mycanvas.width - 20, 0);
ctx.arc(mycanvas.width - 20,20,20,-Math.PI/2, 0);
ctx.lineTo(mycanvas.width, mycanvas.height - 20);
ctx.arc(mycanvas.width - 20,mycanvas.height - 20,20,0, Math.PI/2);
ctx.lineTo(20, mycanvas.height);
ctx.arc(20,mycanvas.height - 20,20,Math.PI/2,Math.PI);
ctx.lineTo(0, 20);
ctx.arc(20,20,20,Math.PI,-Math.PI/2);
ctx.lineTo(30, 0);
ctx.stroke();
}
}
You can use combo_box_title_text.contentWidth
to fit exactly the size of your text 您可以使用
combo_box_title_text.contentWidth
来完全适合您的文本大小
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.