Qt Quickを使って円形のアイコンを作る方法

<1>
canvasを使用して描画
コード#コード#

    Canvas{
        id: imgcanvas
        property url src: "qrc:/Images/testtx.png"
        property int size: 80
        property int borderSize: 1
        width: size
        height: size
        anchors.centerIn: parent
        antialiasing: true
        Image {
            id: img
            source: src
            visible: false
            sourceSize.width: size
            sourceSize.height: size
        }
        onPaint: {
            var ctx = getContext("2d");
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#ecf0f1";
            ctx.beginPath();
            ctx.arc(size / 2,size / 2, size / 2,0, Math.PI * 2,true);
            ctx.clip();
            ctx.closePath();
            ctx.drawImage(img,0,0,size,size);
            ctx.stroke();
        }
        Component.onCompleted: loadImage(src)

げんり

Canvas

を作成する

アンカー

が設置する.

でonCompletedに画像をロード->loadImage(src)

その後onImageLoadedで再描画->requestPaint()

パスの描画を開始します->ctx.beginPath()

は、arc()を使用して円

を描画する.

は、次いで、clip()を呼び出して切り出す

である.

後に描画パスを終了する->ctx.closePath()

次に描画関数を呼び出す->ctx.drawImage()

結果
メリット
コードが簡潔で分かりやすい
欠点
結果のとおりです.粒子現象は非常に深刻である.
<2>
Opacity Maskの使用
コード#コード#

    Rectangle{
        id: rectsrc
        color: "#fffffffff"
        border.width: borderSize
        border.color: "#3498db"
        width: size
        height: size
        radius: size
        visible: false
        smooth: true
    }

    Image {
        id: image
        source: src
        sourceSize.width: size
        sourceSize.height: size
        visible: false
        smooth: true
    }
    OpacityMask{
        source: image
        maskSource: rectsrc
        width: size
        height: size
        anchors.centerIn: parent
    }

げんり

は、Rectangleをカバー形状

として用いる.

は、Imageをカバー源

として用いる.

は、OpacityMaskを用いる、被覆源と被覆形状とを処理する

である.
結果
メリット
Qtが持つ機能を使って、品質のピクチャーの効果が比較的に良いことを保証しました
欠点
リソースの占有(推測)
補足歓迎