[QT] 使用Canvas描画圆角矩形

版权声明： https://blog.csdn.net/u010210864/article/details/80756717

找了好久，网上没有圆角矩形的例子，由于QT库裁剪问题，无法使用QtGraphicalEffects 库，so，只能慢慢自己画了。
自己写了个控件：


import QtQuick 2.0

Item
{
    id:mainRect
    width: 72
    height: 72
    property string canvasimg: ""
    property color mystroke: "#00000000"

    Canvas
    {
        id: canvas
        width: parent.width;
        height: parent.height
        property real hue: 0.0
        onPaint:
        {
              var ctx = getContext("2d")
            var x = 0;
            var y = 0;
            var w = 305;
            var h = 176;
            var r = 6;
            ctx.lineWidth = 20;
              ctx.save()
              ctx.strokeStyle = mystroke;
              ctx.lineJoin = "round"
              ctx.beginPath()
            ctx.roundedRect(x, y, w, h, r, r)
              ctx.closePath()
              ctx.clip()
              ctx.drawImage(canvasimg, 0, 0, w, h)
              ctx.closePath()
              ctx.stroke()
              ctx.restore()
         }
         Component.onCompleted:
         {
             loadImage(canvasimg)
         }
         onImageLoaded:
         {
             mainRect.repaintUI()
         }
    }

    onCanvasimgChanged:
    {
        repaintUI()
    }

    function repaintUI()
    {
        canvas.requestPaint();
    }
}