import QtQuick 2.11
import QtQuick.Controls 2.4
Rectangle
{
id: base
width:640
height:480
color: backgroundColor
property string backgroundColor: "#191919"
anchors.margins: 6
Rectangle {
id: seekTimeBubble
width: currentSeekTime.width + 14
height: currentSeekTime.height + 21
anchors.centerIn: parent
color: parent.color
Canvas {
id: canvasSeekTime
anchors.fill: parent
property real radius: 9
onPaint: {
var ctx = getContext('2d')
ctx.reset()
ctx.strokeStyle = base.color
ctx.lineWidth = 1
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
ctx.moveTo(0, radius)
ctx.arcTo(0, 0, radius, 0,radius)
ctx.lineTo(parent.width - radius, 0)
ctx.arcTo(parent.width, 0, parent.width, radius, radius)
ctx.lineTo(parent.width, parent.height - radius * 2)
ctx.arcTo(parent.width, parent.height - radius,parent.width - radius,parent.height - radius, radius)
ctx.lineTo(parent.width / 2 + 1.5*radius,parent.height - radius)
ctx.lineTo(parent.width / 2, parent.height)
ctx.lineTo(parent.width / 2 - 1.5*radius,parent.height - radius)
ctx.lineTo(radius, parent.height - radius)
ctx.arcTo(0, parent.height - radius, 0, parent.height - radius * 2, radius)
ctx.closePath()
ctx.clip()
ctx.stroke()
ctx.fillStyle = "#333333"
ctx.fillRect(0, 0, width, height)
}
Text {
id: currentSeekTime
anchors {
top: parent.top
topMargin: 3
horizontalCenter: parent.horizontalCenter
}
color: "#ffffff"
font.pointSize: 12
text: "03:21"
onWidthChanged: {
canvasSeekTime.requestPaint()
}
}
}
Glow {
anchors.fill: canvasSeekTime
samples: 17
color: "transparent"
source: canvasSeekTime
}
}
}