は長方形disapear /不可視のQMLのQtの一部

Question

私はQMLでカスタムのGroupBoxを作ってるんだし、現在、私はあなたが私のコンボボックスのタイトルを持って見ることができますthis

のように現れ、この

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" 
    } 

を持って作ります背景のRectangleのボーダー私が望むのは、Titleの背後にあるRectangleの枠の部分を削除することだけです。

私の問題の解決策はありますか？または、私はこの種のGroupBoxを持つことができる他の方法です。あなたはCanvasと白のボーダーでRectangleを置き換える

Answer 1

事前に感謝します：

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(); 
    } 
} 

あなたのテキストの正確大きさに合わせてcombo_box_title_text.contentWidthを使用することができますが