import QtQuick 2.1 Item { id: root property int size: 64 width: size height: size property bool invertY: false property int halfSize: size / 2 property var controlIds: [ 0, 0 ] property vector2d value: Qt.vector2d(0, 0) function update() { value = Qt.vector2d( controlIds[0] ? Controller.getValue(controlIds[0]) : 0, controlIds[1] ? Controller.getValue(controlIds[1]) : 0 ); if (root.invertY) { value.y = value.y * -1.0 } canvas.requestPaint(); } Timer { interval: 50; running: controlIds; repeat: true onTriggered: root.update() } Canvas { id: canvas anchors.fill: parent antialiasing: false onPaint: { var ctx = canvas.getContext('2d'); ctx.save(); ctx.beginPath(); ctx.clearRect(0, 0, width, height); ctx.fill(); ctx.translate(root.halfSize, root.halfSize) ctx.lineWidth = 4 ctx.strokeStyle = Qt.rgba(Math.max(Math.abs(value.x), Math.abs(value.y)), 0, 0, 1) ctx.moveTo(0, 0).lineTo(root.value.x * root.halfSize, root.value.y * root.halfSize) ctx.stroke() ctx.restore() } } }