Add border to rounded rectangle.

It's designed so that it works in exactly the same way as rectangle.
This commit is contained in:
Jaime van Kessel 2018-11-26 15:14:32 +01:00
parent 9c240bdfe3
commit 9732099250
2 changed files with 30 additions and 0 deletions

View file

@ -5,6 +5,7 @@ import UM 1.2 as UM
// The rounded rectangle works mostly like a regular rectangle, but provides the option to have rounded corners on only one side of the rectangle.
Item
{
id: roundedRectangle
// As per the regular rectangle
property color color: "transparent"
@ -15,6 +16,9 @@ Item
// 1 is down, 2 is left, 3 is up and 4 is right.
property int cornerSide: RoundedRectangle.Direction.None
// Simple object to ensure that border.width and border.color work
property BorderGroup border: BorderGroup {}
enum Direction
{
None = 0,
@ -31,6 +35,8 @@ Item
anchors.fill: parent
radius: cornerSide != RoundedRectangle.Direction.None ? parent.radius : 0
color: parent.color
border.width: parent.border.width
border.color: parent.border.color
}
// The item that covers 2 of the corners to make them not rounded.
@ -45,5 +51,22 @@ Item
right: cornerSide == RoundedRectangle.Direction.Left ? parent.right: undefined
bottom: cornerSide == RoundedRectangle.Direction.Up ? parent.bottom: undefined
}
border.width: parent.border.width
border.color: parent.border.color
Rectangle
{
color: roundedRectangle.color
height: cornerSide % 2 ? roundedRectangle.border.width: roundedRectangle.height - 2 * roundedRectangle.border.width
width: cornerSide % 2 ? roundedRectangle.width - 2 * roundedRectangle.border.width: roundedRectangle.border.width
anchors
{
right: cornerSide == RoundedRectangle.Direction.Right ? parent.right : undefined
bottom: cornerSide == RoundedRectangle.Direction.Down ? parent.bottom: undefined
horizontalCenter: cornerSide % 2 ? parent.horizontalCenter: undefined
verticalCenter: cornerSide % 2 ? undefined: parent.verticalCenter
}
}
}
}