Qt5以后的版本,主要加大的对Qt Quick的改进。现实最新的版本可以利用Qt Quick实现很多的绚丽的效果。此里只是利用画布Canvas简单钟表的效果。效果如下:
源码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true width: 740 height: 680 title: qsTr( "Hello World" ) id:window / / color: "red" ; Canvas { id : canvas anchors.fill: parent width: 740 height: 680 onPaint: { var ctx = getContext( "2d" ); drawBack(ctx); drawDot(ctx); var date = new Date(); var hours = date.getHours() hours = hours % 12 ; var minutes = date.getMinutes() var seconds = date.getUTCSeconds(); var timestr = date.toLocaleString( "yyyy-MM-dd hh:mm:ss" ); console.log(date.toLocaleString( "yyyy-MM-dd hh:mm:ss" )); drawSecond(seconds,ctx); drawHour(hours,minutes,ctx); drawMinute(minutes,seconds,ctx); drawSecond(seconds,ctx); } } function drawBack(ctx) { var r = 200 ; ctx.save(); ctx.beginPath(); ctx.translate(width / 2 ,height / 2 ); ctx.clearRect( - r, - r,r * 2 ,r * 2 ); ctx.lineWidth = 10 ; ctx.arc( 0 , 0 ,r - 5 , 0 ,Math.PI * 2 ,false); / / 外圆 ctx.stroke(); / / 画文本 var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 ]; ctx.font = "18px Arial" ; ctx.textAlign = "center" ; ctx.textBaseline = "middle" ; for (var i = 0 ; i < 12 ; + + i) { var rad = 2 * Math.PI / 12 * numbers[i] - 3.14 / 2 ; var x = Math.cos(rad) * (r - 30 ); var y = Math.sin(rad) * (r - 30 ); ctx.fillText(numbers[i],x,y); } / / 画刻度 ctx.lineWidth = 2 ; for (var i = 0 ; i < 60 ; + + i) { ctx.beginPath(); var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 15 ); var y = Math.sin(rad) * (r - 15 ); var x2 = Math.cos(rad) * (r - 10 ); var y2 = Math.sin(rad) * (r - 10 ); / / 通过画线也可以 if (i % 5 = = = 0 ) {ctx.strokeStyle = "#000000" ;} else { ctx.strokeStyle = "#989898" ;} ctx.moveTo(x,y); ctx.lineTo(x2,y2); ctx.stroke(); / / 画圆实现 / / if (i % 5 = = = 0 ) / / {ctx.fillStyle = "#000000" ;} / / else / / { ctx.fillStyle = "#FFFFFF" ;} / / ctx.arc(x,y, 2 , 0 , 3.15 * 2 ,false); / / ctx.fill(); } ctx.restore(); } function drawHour(hour, minute, ctx) { var r = 200 ; ctx.save(); ctx.beginPath(); / / 必须写 ctx.lineWidth = 7 ; ctx.lineCap = "round" ; ctx.translate(width / 2 ,height / 2 ); var rad = Math.PI * 2 / 12 * hour + Math.PI * 2 * minute / 12 / 60 - Math.PI; ctx.rotate(rad); ctx.moveTo( 0 , - 10 ); ctx.lineTo( 0 ,r / 2 - 10 ); ctx.stroke(); / / 必须写(填充方式) ctx.restore(); } function drawMinute(minute,second,ctx) { var r = 200 ; ctx.save(); ctx.beginPath(); / / 必须写 ctx.lineWidth = 5 ; ctx.lineCap = "round" ; ctx.translate(width / 2 ,height / 2 ); var rad = Math.PI * 2 * minute / 60 + Math.PI * 2 * second / 60 / 60 - Math.PI; ctx.rotate(rad); ctx.moveTo( 0 , - 10 ); ctx.lineTo( - 10 ,r * 3 / 5 - 10 ); ctx.stroke(); / / 必须写(填充方式) ctx.restore(); } function drawSecond(second,ctx) { var r = 200 ; ctx.save(); ctx.beginPath(); / / 必须写 ctx.lineWidth = 3 ; ctx.lineCap = "round" ; ctx.translate(width / 2 ,height / 2 ); ctx.strokeStyle = "#ff0000" ; var rad = Math.PI * 2 * second / 60 - Math.PI; ctx.rotate(rad); ctx.moveTo( 0 , - 20 ); ctx.lineTo( 0 ,r * 4 / 5 - 10 ); ctx.stroke(); / / 必须写(填充方式) ctx.restore(); } function drawDot(ctx) { ctx.save(); ctx.beginPath(); / / 必须写 ctx.translate(width / 2 ,height / 2 ); ctx.fillStyle = "#ffffff" ; ctx.arc( 0 , 0 , 3 , 0 ,Math.PI * 2 ); ctx.fill(); / / 必须写(填充方式) ctx.restore(); } / / 定时器 Timer { interval: 1000 ; running: true; repeat: true onTriggered: canvas.requestPaint(); } } |
利用定时器实现动态效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/187796/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)