逻辑控制

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
}
}
}

END

文章引用微信公众号"嵌入式微处理器",如有侵权,请联系管理员删除!