Всем привет! Начинаю изучать QML, пишу прогу что-то типа регулятора.
Изображение в центре крутится с помощью Slider и соответствующее значение отображается в компоненте Text в левом верхнем углу. Вопрос следующий, можно ли сделать так, чтобы с помощью этого-же компонента Text или какого то другого можно было бы ввести значение по шкале, например 64, и после этого регулятор повернулся бы на это же значение. Заранее спасибо за помощь.
=================================== =========
main.qml
=================================== =========
Код:
import QtQuick 1.1
import "content"
Rectangle{
id: rect
width: 400; height: 400
color:"#cccccc"
Dial{
id: dial
anchors.centerIn: rect
value: slider.x * 100 / (container.width - 33)
}
MouseArea{
acceptedButtons: Qt.LeftButton
anchors.fill: rect
onClicked: {
menu1.visible = false
menu2.visible = false
}
}
Rectangle {
id: container
anchors { bottom: parent.bottom; left: parent.left
right: parent.right; leftMargin: 20; rightMargin: 20
bottomMargin: 10
}
height: 16
radius: 8
opacity: 0.7
smooth: true
gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 1.0; color: "white" }
}
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
radius: 6
smooth: true
gradient: Gradient {
GradientStop { position: 0.0; color: "#424242" }
GradientStop { position: 1.0; color: "black" }
}
MouseArea {
anchors.fill: parent
anchors.margins: -16 // Increase mouse area a lot outside the slider
drag.target: parent; drag.axis: Drag.XAxis
drag.minimumX: 1; drag.maximumX: container.width - 33
}
}
}
Rectangle{
id: indikator
x: 20; y: 20
width: 100; height: 50
border.color: "#000"
color: "#fff"
}
Text{
anchors.centerIn: indikator
color: "#000"
text: dial.value
font.pointSize: 24; font.bold: true
}
Item{
id:menu1
visible: false
Rectangle{
id: number1
width: 60; height:30
x: 220; y: 200
border.color: "#000"
color: "#fff"
MouseArea{
width: 60
height: 30
acceptedButtons: Qt.LeftButton
anchors.fill: menu1
onClicked: {
chooser.visible = true
textInp.visible = true
menu1.visible = false
menu2.visible = false
}
}
}
Text{
anchors.centerIn: number1
text: "Rotate"
font.pointSize: 13
}
}
Item{
id:menu2
visible: false
Rectangle{
id: number2
width: 60; height:30
x: 220; y: 230
border.color: "#000"
color: "#fff"
MouseArea{
width: 60
height: 30
acceptedButtons: Qt.LeftButton
anchors.fill: menu2
onClicked: Qt.quit()
}
}
Text{
anchors.centerIn: number2
text: "Exit"
font.pointSize: 13
}
}
MouseArea{
anchors.fill: dial
acceptedButtons: Qt.RightButton
onClicked: {
menu1.visible = true
menu2.visible = true
}
}
Rectangle{
id: chooser
x:240; y:20
width: 140; height: 70
color: "#123456"
visible: false
TextInput{
id: textInp
anchors.centerIn: chooser
color: "#000"
font.pointSize: 24; font.bold: true
visible: false
text: dial.value
}
MouseArea{
anchors.fill: chooser
onDoubleClicked: chooser.visible = false
}
}
}
========================
Dial.qml
==========================
Код:
import QtQuick 1.1
Item {
id: dial
width: 155; height: 155
property int value : 0
Image {
id: out
x: 10; y:10
width: 200; height: 200
source: "background.png"
}
Image{
id: inn
width: 90; height: 90
x: 62; y: 60
smooth: true
source: "In.png"
transform: Rotation {
id: needleRotation
origin.x: inn.width/2; origin.y: inn.height/2
angle: dial.value*2.2+25
}
}
}