逻辑控制

this.draw = function(ctx) {

(资料图片)
ctx.clearRect(0, 0, 300, 300)
ctx.save()
var time = newDate()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
// 1. 绘制背景
this.drawBackground(ctx)
// 2. 绘制的数字
this.drawNumbers(ctx)
// 3. 绘制时针
this.drawHour(ctx, hours, minutes, seconds)
// 4. 绘制分针
this.drawMinute(ctx, minutes, seconds)
// 5. 绘制秒针
this.drawSecond(ctx, seconds)
// 6. 绘制圆心
this.drawCircle(ctx)
// 7. 绘制时针的刻度
this.drawHourTick(ctx)
// 8. 绘制分针的刻度
this.drawMinuteTick(ctx)
ctx.restore()
}

组件封装

importQtQuick
import"qrc:/js/clock.js" as JsClock
Item{
property color backgroundColor: "white"
property color circleColor: "gray"
property color circleBorderColor: "black"
property color borderColor: "black"
property int borderWidth: 2
property color numberColor: "black"
property color hourColor: "black"
property color minuteColor: "black"
property color secondColor: "orange"
property color hourTickColor: "black"
property color minuteTickColor: "black"
Canvas{
id: clockCanvas
anchors.fill: parent
property var clock: newJsClock.Clock()
onPaint: {
draw()
}
// 绘制钟表
function draw() {
var ctx = getContext("2d")
ctx.save()
var scaleX = width / 300
var scaleY = height / 300
ctx.scale(scaleX, scaleY)
setStyle()
clock.draw(ctx)
ctx.restore()
requestAnimationFrame(draw)
}
// 设置样式
function setStyle() {
clock.setBackgroundColor(backgroundColor)
clock.setCircleColor(circleColor)
clock.setCircleBorderColor(circleBorderColor)
clock.setBorderColor(borderColor)
clock.setBorderWidth(borderWidth)
clock.setNumberColor(numberColor)
clock.setHourColor(hourColor)
clock.setMinuteColor(minuteColor)
clock.setSecondColor(secondColor)
clock.setHourTickColor(hourTickColor)
clock.setMinuteTickColor(minuteTickColor)
}
}
}

组件使用

importQtQuick
importQtQuick.Layouts
import"../component"
Rectangle{
id: clockPage
// 取值范围 [min, max]
function randomNumber(min, max) {
returnMath.floor((Math.random() * (max - min + 1)) + min)
}
// 随机颜色
function randomColor() {
returnQt.rgba(randomNumber(0, 1), randomNumber(0, 1), randomNumber(0, 1), 1)
}
RowLayout{
anchors.fill: parent
spacing: 10
Item{
Layout.fillWidth: true
}
Clock{
width: 300
height: 300
}
Clock{
id: randomClock
width: 400
height: 400
function setRandomStyle() {
randomClock.backgroundColor = randomColor()
randomClock.circleColor = randomColor()
randomClock.circleBorderColor = randomColor()
randomClock.borderColor = randomColor()
randomClock.borderWidth = randomNumber(5, 20)
randomClock.numberColor = randomColor()
randomClock.hourColor = randomColor()
randomClock.minuteColor = randomColor()
randomClock.secondColor = randomColor()
randomClock.hourTickColor = randomColor()
randomClock.minuteTickColor = randomColor()
}
MouseArea{
anchors.fill: parent
onClicked: randomClock.setRandomStyle()
}
Component.onCompleted: setRandomStyle()
}
Item{
Layout.fillWidth: true
}
}
}