QML绘制圆角图片

港控/mmm° 2022-11-18 01:45 169阅读 0赞

import QtQuick 2.14
    import QtQuick.Window 2.14
    import QtQuick.Controls 2.14
    import QtGraphicalEffects 1.0
    
    Window {
        id: window
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        property int imageRasdius: imageWidth / 2
        property int imageWidth: 300
        property int imageHeight: 300
    
        Rectangle{
            id : rect
            width: 300
            height: 300
            anchors.centerIn: parent
    
            Image {
                id: image
                smooth: true
                visible: false
                anchors.fill: parent
                source: "qrc:/index_logo.png"
                sourceSize: Qt.size(imageWidth,imageHeight)
                antialiasing: true
            }
            Rectangle {
                id: imageRect
                color: "#FFFFFF"
                anchors.fill: parent
                radius: imageRasdius
                visible: false
                antialiasing: true
                smooth: true
            }
            OpacityMask {
                id: imageOpcityMask
                anchors.fill: image
                source: image
                maskSource: imageRect
                visible: true
                antialiasing: true
            }
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0bDE5OTI_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0bDE5OTI_size_16_color_FFFFFF_t_70]: /images/20221022/73f6584392fb4ca580fcdd36853b9ab8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 canvas 绘制圆角矩形

/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Numbe...

Love The Way You Lie/ 2024年04月17日 05:28/ 0 赞/ 50 阅读

相关 canvas图片画圆角

获取屏幕比率有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍 var getPixelRatio = function(context)

冷不防/ 2023年01月11日 08:52/ 0 赞/ 222 阅读

相关 QML绘制圆角图片

import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls 2.14

港控/mmm°/ 2022年11月18日 01:45/ 0 赞/ 170 阅读

相关 QML Canvas 绘制波浪进度球

目前这个实现比较简单，就是填充一个带正弦路径的区域，然后截取出圆球部分。 ![20210312003005463.png][]![20210312003108913.png]

曾经终败给现在/ 2022年11月07日 11:51/ 0 赞/ 213 阅读

相关解决QML中clip对圆角无效的问题

问题根据 QML Item 类型 clip 属性的文档： [https://doc.qt.io/qt-5/qml-qtquick-item.html\clip-pro

痛定思痛。/ 2022年11月05日 15:53/ 0 赞/ 193 阅读

相关 QML使用ShaderEffect绘制波纹

0.前言对于 ShaderEffect 的介绍请看 Qt 文档：[https://doc.qt.io/qt-5/qml-qtquick-shadereffect.htm

- 日理万妓/ 2022年10月05日 00:48/ 0 赞/ 140 阅读

相关 Android圆角图片

自定义ImageView package com.interjoy.testdemo.views; import android.content.C

小咪咪/ 2022年06月14日 09:07/ 0 赞/ 247 阅读

相关 canvas绘制圆角头像

如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下：首先，拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍)

不念不忘少年蓝@/ 2022年03月25日 03:00/ 0 赞/ 257 阅读

相关不用圆角图片制作的圆角效果

<style> td\{font-size:9pt;word-break: break-all\} \corner\{font-size:1px\} \tit\{h

阳光穿透心脏的1/2处/ 2021年11月02日 16:01/ 0 赞/ 361 阅读

相关 Flutter 图片圆角功能

代码如下： return Center( child: Container( width: 250,

逃离我推掉我的手/ 2021年06月11日 15:14/ 0 赞/ 482 阅读