2016-10-11 51 views
1

我在QML製作一個自定義分組框中,目前我有這個使矩形disapear的一部分/ QML無形的Qt

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

明顯顯示出像this

你可以看到我的組合框標題有背景中的矩形邊框。我想要的只是刪除標題後面的Rectangle邊框的一部分。

有沒有解決我的問題?或者我可以擁有這種GroupBox的任何其他方式。在此先感謝

+0

您可以嘗試使用線條的繪製[畫布](http://doc.qt.io/qt-5/qml-qtquick-canvas.html) – user2436719

+0

我認爲你應該刪除大寫的文本,因爲它看起來不尊重。 – folibis

+0

正在使用適合這種情況的帆布?我有一些矩形,就像你在代碼中看到的那樣,我會在哪裏放置畫布?我可以在畫布上繪製一條圓形線條,就像你在附件中看到的那樣?你能提供一些代碼嗎?問候 –

回答

2

你用白色邊框與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(); 
    } 
} 

您可以使用combo_box_title_text.contentWidth,以滿足您的文字尺寸完全相同

+0

謝謝你!你讓我的生活變得輕鬆! :) –