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

最新推荐文章于 2024-03-13 12:00:22 发布

半闲居士吃螃蟹

最新推荐文章于 2024-03-13 12:00:22 发布

阅读量262

点赞数

分类专栏： QT 文章标签： qt

本文链接：https://blog.csdn.net/u010210864/article/details/80756717

版权

QT 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了在QT中由于库的限制无法使用QtGraphicalEffects库来绘制圆角矩形，作者自行编写了一个控件，使用Canvas进行圆角矩形的绘制，包括设置颜色、边框宽度和图片加载等功能。

摘要由CSDN通过智能技术生成

找了好久，网上没有圆角矩形的例子，由于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();
    }
}