Qt/QML学习-Canvas基础图形绘制

最新推荐文章于 2024-07-30 09:57:08 发布

放假当宅宅

最新推荐文章于 2024-07-30 09:57:08 发布

阅读量190

点赞数 3

分类专栏： Qt/QML学习文章标签： qt 学习

本文链接：https://blog.csdn.net/qq1138345424/article/details/140069895

版权

Qt/QML学习专栏收录该内容

44 篇文章 1 订阅

订阅专栏

QML学习

Canvas基础图形绘制例程
视频讲解
代码

main.qml

    Canvas {
        id: myCanvas
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d")

            ctx.beginPath()
            ctx.rect(50, 50, 100, 100)                                              // 左上角坐标(50, 50)，长100，宽100
            ctx.stroke()

            ctx.beginPath()
            ctx.arc(200, 100, 50, 0*Math.PI, 1*Math.PI)                             // 圆中心坐标(200, 100)，半径50，绘制弧度从0到PI
            ctx.stroke()

            ctx.beginPath()
            ctx.moveTo(250, 100)                                                    // 直线起点(250, 100)
            ctx.lineTo(420, 100)                                                    // 直线终点(350, 100)
            ctx.stroke()

            ctx.fillStyle = "red";
            ctx.font = "italic 30px Arial"
            ctx.fillText("Hello World", 250, 90)                                    // 文本左下角(250, 90)

            ctx.beginPath()
            ctx.ellipse(420, 50, 200, 100)                                          // 左上角坐标(420, 50)，宽200，高100
            ctx.stroke()

            ctx.fillStyle = "red";
            ctx.fillRect(50, 200, 100, 100)                                         // 左上角坐标(50, 200)，长100，宽100
        }
    }