Solved Animation in Canvas
-
New_Project_2.qml
import QtQuick 2.0 Rectangle { id: knob color: "black" transformOrigin: Item.Center property int lineWidth: width / 8 property int fontSize: width / 7 property color knobBackgroundColor: Qt.rgba(0.1, 0.1, 0.1, 0.1) property color knobColor: Qt.rgba(1, 0, 0, 1) //value parameters property double from:0 property double value: 60 property double to: 100 //progress circle angle property double fromAngle: Math.PI - 1 property double toAngle: Math.PI *2 + 1 //progress from right to left property bool reverse: false function update(value) { knob.value = value canvas.requestPaint() } Canvas { id: background width: parent.width height: parent.height antialiasing: true property int radius: background.width/2 onPaint: { var ctx = background.getContext('2d'); ctx.strokeStyle = "gray"; ctx.lineWidth = knob.lineWidth; ctx.lineCap = "round" ctx.beginPath(); ctx.clearRect(0, 0, background.width, background.height); ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.toAngle, false); ctx.stroke(); } } Canvas { id:canvas width: parent.width height: parent.height antialiasing: true property double step: knob.value / (knob.to - knob.from) * (knob.toAngle - knob.fromAngle) property int radius: width/2 onPaint: { var ctx = canvas.getContext('2d'); ctx.strokeStyle = "yellow" ; ctx.lineWidth = knob.lineWidth; ctx.lineCap = "round" ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height); if (knob.reverse) { ctx.arc(radius, radius, radius - knob.lineWidth, knob.toAngle, knob.toAngle - step, true); } else { ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.fromAngle + step, false); } ctx.stroke(); } } }
Useit.qml
import QtQuick 2.0 Rectangle { height: 500 width: 700 color: "black" New_Project_2 { id: knob anchors.centerIn: parent width: 200 height: 200 from:0 to: 100 fromAngle: Math.PI - 1 toAngle: Math.PI*2 reverse: false rotation: 29 value: 10 } Rectangle { width:50 height: 50 color: "green" MouseArea { anchors.fill: parent onClicked: { knob.update(30) } } } }
The progress bar is moving, but i want animation in it, like it should move slowly,
to the point ? Can anybody suggest what should do ? -
if your "progress bar" is working as you want it to, you can simply add a timer object and change the value
Timer { running: true rebelte: true interval: 20 //ms onTriggered: { if (value < to) value++ else value = from } }
you probably also want to call
ctx.reset()
in your onPaint function, to clear your previous drawings
alternatively, there's also QPropertyAnimation
That said, I think this should work as well
Behavior on value{ NumberAnimation{ duration: 300 //ms } }
than you have an automatic animation each time you change your value property
-
@J.Hilk Both of the things are not working , I tried, Still the same.
-
works fine for me:
//RoundPbar import QtQuick 2.11 Rectangle { id: knob color: "black" transformOrigin: Item.Center property int lineWidth: width / 8 property int fontSize: width / 7 property color knobBackgroundColor: Qt.rgba(0.1, 0.1, 0.1, 0.1) property color knobColor: Qt.rgba(1, 0, 0, 1) //value parameters property double from:0 property double value: 60 property double to: 100 //progress circle angle property double fromAngle: Math.PI - 1 property double toAngle: Math.PI *2 + 1 //progress from right to left property bool reverse: false onValueChanged: canvas.requestPaint() Behavior on value { NumberAnimation{ duration: 1000 //ms } } Canvas { id: background width: parent.width height: parent.height antialiasing: true property int radius: background.width/2 onPaint: { var ctx = background.getContext('2d'); ctx.strokeStyle = "gray"; ctx.lineWidth = knob.lineWidth; ctx.lineCap = "round" ctx.beginPath(); ctx.clearRect(0, 0, background.width, background.height); ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.toAngle, false); ctx.stroke(); } } Canvas { id:canvas width: parent.width height: parent.height antialiasing: true property double step: knob.value / (knob.to - knob.from) * (knob.toAngle - knob.fromAngle) property int radius: width/2 onPaint: { var ctx = canvas.getContext('2d'); ctx.strokeStyle = "yellow" ; ctx.lineWidth = knob.lineWidth; ctx.lineCap = "round" ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height); if (knob.reverse) { ctx.arc(radius, radius, radius - knob.lineWidth, knob.toAngle, knob.toAngle - step, true); } else { ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.fromAngle + step, false); } ctx.stroke(); } } } //main.qml import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") RoundPbar { id: pbar anchors.fill: parent value: 10 } MouseArea { anchors.fill: parent onPressed: pbar.value = pbar.value +10 } }
-
@J.Hilk Thank you so much for this help :) :) Now it's working correctly.