qml canvas 图片旋转

最新推荐文章于 2025-05-27 22:33:44 发布

原创最新推荐文章于 2025-05-27 22:33:44 发布 · 528 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享 #qt #android

QT for Android 专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何使用Canvas API进行图像旋转和缩放，展示了如何在JavaScript中通过`Canvas`对象实现90度顺时针旋转并调整图片位置。代码实例包括`save()`、`clearRect()`、`translate()`和`rotate()`等方法的运用。

废话少说，直接上代码

    Canvas {
        id: canvas
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.save()
            ctx.clearRect(0, 0, width, height)
            ctx.translate(width / 2, height / 2)
            ctx.rotate(90 * Math.PI / 180.0) // 90为旋转角度, 顺时针方向
            ctx.translate(-width / 2, -height / 2)
            ctx.drawImage("1.png", width / 2, height / 2)
            ctx.restore()
        }
        Component.onCompleted: {
            staticMap2.loadImage("1.png")
        }
        onImageLoaded: {
            requestPaint()
        }
    }