キャンバスこのチュートリアル蟻族の多くの例がありますが、私はどこAPI、唯一の啓発を見ました。サークルプログレスバーに囲まれた円形の絵は、音楽と一緒に遊ぶ、プログレスバーは、ドローの少しすることができます。絵を対照として、一緒にここでは、ラウンド描きました。外側の呼び出しは、あなたはタイマーを開始する必要がある場合には、その後、アクセスパラメータを使用することができます。
カスタムCircular_img.qml
1インポートQtQuick 2.0 2インポートQtGraphicalEffects 1.0 3 4 5 長方形{ 6 プロパティのURL cuted_background 7 プロパティINT background_width 8 プロパティINT background_height 9 プロパティINT arcWidth 10 性色arcColor 11 性色arcBackgroundColor 12 性実際の進捗：0 13 14 ID：IMG 15 anchors.centerIn：親 16 幅：background_width 17 高さ：background_width 18の 半径：幅/ 2 19 色：" 透明" 20 画像{ 21 ID：_image 22 平滑：真 23 可視：偽 24 anchors.fill：親 25 ソース：cuted_background 26 sourceSize：Qt.size（parent.size、parent.size） 27 アンチエイリアシング：真 28 } 29 長方形{ 30 ID：_MASK 31 ：色" 黒" 32 anchors.fill：親 33 半径：幅/ 2 34 可視：偽 35 アンチエイリアシング：真 36 平滑：真 37 } 38 OpacityMask { 39 ID： mask_image 40 anchors.fill：_image 41 ソース：_image 42 maskSource：_MASK 43 可視：真 44 アンチエイリアシング：真 45 } 46 47 キャンバス{ 48 ID：キャンバス 49 anchors.centerIn：mask_image 50 幅：2 * background_width + arcWidth 51 の高さ：2 * background_height + arcWidth 52 のOnPaint：{ 53 VaRの CTX =のgetContext（" 2D " ） 54 ctx.clearRect（0、0 、canvas.width、canvas.height） 55 ctx.beginPath（） 56 ctx.strokeStyle = arcBackgroundColor 57 ctx.lineWidth = arcWidth 58 ctx.arc（ canvas.width / 2、canvas.height / 2、background_width / 2、0、にMath.PI * 2、偽） 59 ctx.stroke（） 60 61 のvar R =進捗*にMath.PI / 180 62 ctx.beginPath（） 63 ctx.strokeStyle = arcColor 64 ctx.lineWidth = arcWidth 65 66 ctx.arc（canvas.width / 2、canvas.height / 2、background_width / 2、0 - 90 *にMath.PI / 180は、R- 90 *にMath.PI / 180、偽） 67 ctx.stroke（） 68 } 69 70 } 71 72 }
主な機能の呼び出し：
1つのインポートQtQuick 2.9 2インポートQtQuick.Window 2.2 3 4 5 ウィンドウ{ 6 可視：真 7 幅：640 8 の高さ：480 9 タイトル：QSTR（" ハローワールド" ） 10 11 Circular_imgは{ 12 ID：circular_img 13 cuted_backgroundを：" 。 /play_history_default.png 「 14 background_width：100 15 background_height：100 16の 進捗：300 17 arcWidth：2 18 arcColor：" ＃148014 " 19 arcBackgroundColor：" #AAAAAA " 20 } 21 }
レンダリング：
