首页 > 解决方案 > 如何在qml中绘制一个梯形的图像?

问题描述

我想在 qml 中绘制一个梯形,梯形图像内的图像作为裁剪图像。

标签: qtcanvasqmlpolygon

解决方案


我能够通过 Canvas 解决它。这是我的解决方案:

Canvas {
    id: canvas
    anchors.fill: parent

    property string imagefile:"qrc:/myImage.png"
    onPaint: {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(757,0);
        ctx.lineTo(1163,0);
        ctx.lineTo(1486, 1080);
        ctx.lineTo(434, 1080);
        ctx.lineTo(757,0);
        ctx.closePath()
        ctx.clip();

    }

    onImageLoaded:{
        var ctx = canvas.getContext("2d");
        ctx.scale(1/Screen.devicePixelRatio,1/Screen.devicePixelRatio);
        ctx.drawImage(canvas.imagefile,0,0,1920,1080);
        ctx.scale(Screen.devicePixelRatio,Screen.devicePixelRatio);
        canvas.requestPaint();
    }

    Component.onCompleted: {

        loadImage(canvas.imagefile);
    }
}

推荐阅读