Knobs effect in QML

[LordAlexander]

Hi all,

I’m trying to implement a custom widget in QML to obtain an effect such as http://anthonyterrien.com/knob/ [× Angle offset element in the page].
I tried with canvas object but if I apply a scale to the parent object of the canvas the quality of the canvas appear very ugly.
I tried with a glsl frag shader but the variable glFragCoord bind me to the screen coordinates and anyway if I apply a scale to the parent object the rendering appears ugly.

Someone can help me please???

[bounce]

What do you mean by ugly ?
To enable antialiasing in Qt Quick Canvas , you must set the property " antialiasing " to "true" and set the property "renderTarget" to "Canvas.Image"
[find on internet]

[LordAlexander]

Hi Bounce,

thanks for your reply. In order to see the ugly effect of the canvas object, I modified the example project "canvas" that comes with the Qt 5.1.1 release. I have added another slider control, to change the PARENT scale. Obviously, by changing the parent scale, all the scene objects are affected from the new scale value. When this scale value change, the canvas object does not rendering well, it seems as raster scaling.

This is the code that I used for the test:

import QtQuick 2.0
import "../contents"
import "../../shared"
 
Item {
    id: container
    width: 320
    height: 480
 
    scale: scaleCtrl2.value
 
    onScaleChanged: { canvas.requestPaint()  }
 
    Column {
        spacing: 6
        anchors.fill: parent
        anchors.topMargin: 12
 
        Text {
            font.pointSize: 24
            font.bold: true
            text: "Smile with arcs"
            anchors.horizontalCenter: parent.horizontalCenter
            color: "#777"
        }
 
        Canvas {
            id: canvas
            width: 320 * parent.scale
            height: (parent.height - controls.height) * parent.scale
            antialiasing: true
            renderTarget: Canvas.Image
 
            property color strokeStyle:  Qt.darker(fillStyle, 1.6)
            property color fillStyle: "#e0c31e" // yellow
            property int lineWidth: lineWidthCtrl.value
            property bool fill: true
            property bool stroke: true
            property real scale : scaleCtrl.value
            property real rotate : rotateCtrl.value
 
            onLineWidthChanged:requestPaint();
            onFillChanged:requestPaint();
            onStrokeChanged:requestPaint();
            onScaleChanged:requestPaint();
            onRotateChanged:requestPaint();
 
            onPaint: {
                var ctx = canvas.getContext('2d');
                var originX = 85
                var originY = 75
                ctx.save();
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.translate(originX, originX);
                ctx.globalAlpha = canvas.alpha;
                ctx.strokeStyle = canvas.strokeStyle;
                ctx.fillStyle = canvas.fillStyle;
                ctx.lineWidth = canvas.lineWidth;
 
                ctx.translate(originX, originY)
                ctx.scale(canvas.scale, canvas.scale);
                ctx.rotate(canvas.rotate);
                ctx.translate(-originX, -originY)
 
                ctx.beginPath();
                ctx.moveTo(75 + 50  * Math.cos(0),
                           75 - 50  * Math.sin(Math.PI*2));
                ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
                ctx.moveTo(75,70);
                ctx.arc(75,70,35,0,Math.PI,false);   // Mouth (clockwise)
                ctx.moveTo(60,65);
                ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
                ctx.moveTo(90 + 5  * Math.cos(0),
                           65 - 5  * Math.sin(Math.PI*2));
                ctx.moveTo(90,65);
                ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
                ctx.closePath();
                if (canvas.fill)
                    ctx.fill();
                if (canvas.stroke)
                    ctx.stroke();
                ctx.restore();
            }
        }
    }
    Column {
        id: controls
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 12
        Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"}
        Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"}
        Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
        Slider {id: scaleCtrl2 ; min: 0.01 ; max: 2 ; init: 1 ; name: "Parent Scale"}
    }
}

import QtQuick 2.0
import "../contents"
import "../../shared"

Item {
    id: container
    width: 320
    height: 480

    scale: scaleCtrl2.value

    onScaleChanged: { canvas.requestPaint()  }

    Column {
        spacing: 6
        anchors.fill: parent
        anchors.topMargin: 12

        Text {
            font.pointSize: 24
            font.bold: true
            text: "Smile with arcs"
            anchors.horizontalCenter: parent.horizontalCenter
            color: "#777"
        }

        Canvas {
            id: canvas
            width: 320 * parent.scale
            height: (parent.height - controls.height) * parent.scale
            antialiasing: true
            renderTarget: Canvas.Image

            property color strokeStyle:  Qt.darker(fillStyle, 1.6)
            property color fillStyle: "#e0c31e" // yellow
            property int lineWidth: lineWidthCtrl.value
            property bool fill: true
            property bool stroke: true
            property real scale : scaleCtrl.value
            property real rotate : rotateCtrl.value

            onLineWidthChanged:requestPaint();
            onFillChanged:requestPaint();
            onStrokeChanged:requestPaint();
            onScaleChanged:requestPaint();
            onRotateChanged:requestPaint();

            onPaint: {
                var ctx = canvas.getContext('2d');
                var originX = 85
                var originY = 75
                ctx.save();
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.translate(originX, originX);
                ctx.globalAlpha = canvas.alpha;
                ctx.strokeStyle = canvas.strokeStyle;
                ctx.fillStyle = canvas.fillStyle;
                ctx.lineWidth = canvas.lineWidth;

                ctx.translate(originX, originY)
                ctx.scale(canvas.scale, canvas.scale);
                ctx.rotate(canvas.rotate);
                ctx.translate(-originX, -originY)

                ctx.beginPath();
                ctx.moveTo(75 + 50  * Math.cos(0),
                           75 - 50  * Math.sin(Math.PI*2));
                ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
                ctx.moveTo(75,70);
                ctx.arc(75,70,35,0,Math.PI,false);   // Mouth (clockwise)
                ctx.moveTo(60,65);
                ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
                ctx.moveTo(90 + 5  * Math.cos(0),
                           65 - 5  * Math.sin(Math.PI*2));
                ctx.moveTo(90,65);
                ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
                ctx.closePath();
                if (canvas.fill)
                    ctx.fill();
                if (canvas.stroke)
                    ctx.stroke();
                ctx.restore();
            }
        }
    }
    Column {
        id: controls
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 12
        Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"}
        Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"}
        Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
        Slider {id: scaleCtrl2 ; min: 0.01 ; max: 2 ; init: 1 ; name: "Parent Scale"}
    }
}

To copy to clipboard, switch view to plain text mode 

I attach an image of the rendering, that is correct on the left when parent scale is not yet modified, and on the right bad rendering when scane assumes values less or greater than 1:

rendering.png