Qt Quick 圆形头像制作方法



  • <1>

    使用 canvas 进行绘制

    代码

        Canvas{
            id: imgcanvas
            property url src: "qrc:/Images/testtx.png"
            property int size: 80
            property int borderSize: 1
            width: size
            height: size
            anchors.centerIn: parent
            antialiasing: true
            Image {
                id: img
                source: src
                visible: false
                sourceSize.width: size
                sourceSize.height: size
            }
            onPaint: {
                var ctx = getContext("2d");
                ctx.lineWidth = 1;
                ctx.strokeStyle = "#ecf0f1";
                ctx.beginPath();
                ctx.arc(size / 2,size / 2, size / 2,0, Math.PI * 2,true);
                ctx.clip();
                ctx.closePath();
                ctx.drawImage(img,0,0,size,size);
                ctx.stroke();
            }
            Component.onCompleted: loadImage(src)
           
    

    原理

    • 创建 Canvas
    • 然后 设置
    • 然后 在 Component.onCompleted载入图像 -> loadImage(src)
    • 然后 在 onImageLoaded重绘 -> requestPaint()
    • 然后 开始绘制路径 -> ctx.beginPath()
    • 然后 使用 arc() 进行 绘制圆
    • 然后 调用 clip() 进行 剪裁
    • 在之后 结束绘制路径 -> ctx.closePath()
    • 然后 调用绘制函数 -> ctx.drawImage()

    结果

    0_1470144427736_result1.png

    优点

    代码 简洁通俗易懂

    缺点

    如结果所示。颗粒 现象非常严重

    <2>

    使用 OpacityMask

    代码

        Rectangle{
            id: rectsrc
            color: "#fffffffff"
            border.width: borderSize
            border.color: "#3498db"
            width: size
            height: size
            radius: size
            visible: false
            smooth: true
        }
    
        Image {
            id: image
            source: src
            sourceSize.width: size
            sourceSize.height: size
            visible: false
            smooth: true
        }
        OpacityMask{
            source: image
            maskSource: rectsrc
            width: size
            height: size
            anchors.centerIn: parent
        }
    

    原理

    • 使用 Rectangle 作为 覆盖形状
    • 使用 Image 作为 覆盖源
    • 使用 OpacityMask覆盖源覆盖形状 进行处理

    结果

    0_1470145364888_result2.png

    优点

    使用 Qt 自带的功能,保证了质量
    图片效果 较好

    缺点

    占用资源 猜测

    欢迎补充



  • @Accelerated 我就是使用OpacityMask的,目前暂时这样了,需要消耗两个Item子类,所以一旦多了就有一点费。





  • @jiangcaiyang123 比如说,这个图片:

    就是大量使用了QML的OpacityMask来制作的。



  • @jiangcaiyang123 啊,这样啊。( ⊙ o ⊙ )


Log in to reply
 

走马观花

最近的回复

  • 诶 没有Linux吗??

    read more
  • 萌梦 男孩,女孩,和蛋

    menghome.png

    read more
  • 设计模式-工厂模式

    使用qt/qml来演示设计模式效果,便于学习理解

    1)定义创建对象的接口,封装对象的创建
    2)使具体化类的工作延迟到工厂子类中

    bg.png
    image.png

    1. 工厂类

    createProduct使用了参数来选择要创建哪个产品

    #ifndef FACTORY_H #define FACTORY_H #include <QObject> class Product; class QString; class Factory: public QObject { Q_OBJECT public: virtual ~Factory() = 0; virtual Product* createProduct(QString type) = 0; protected: Factory(); }; class ConcreteFactory: public Factory { Q_OBJECT public: ~ConcreteFactory(); ConcreteFactory(); public slots: Product* createProduct(QString type); }; #endif // FACTORY_H #include "factory.h" #include "product.h" #include <QtQml/qqml.h> Factory::~Factory() { } Factory::Factory() { qmlRegisterType<Product>("Product", 1, 0, "Product"); } ConcreteFactory::~ConcreteFactory() { } ConcreteFactory::ConcreteFactory() { } Product *ConcreteFactory::createProduct(QString type) { if(type == "boy") return static_cast<Product *>(new ConcreteProduct1()); else if(type == "girl") return static_cast<Product *>(new ConcreteProduct2()); return static_cast<Product *>(new ConcreteProduct1()); } 2 产品类

    一个产品是萌梦男,一个产品是萌梦女

    #ifndef PRODUCT_H #define PRODUCT_H #include <QObject> class Product: public QObject { Q_OBJECT public: virtual ~Product() = 0; Q_PROPERTY(QString icon READ icon NOTIFY iconChanged) QString m_icon; QString icon() const { return m_icon; } signals: void iconChanged(QString icon); protected: Product(); signals: public slots: }; class ConcreteProduct1: public Product { Q_OBJECT public: ~ConcreteProduct1(); ConcreteProduct1(); }; class ConcreteProduct2: public Product { Q_OBJECT public: ~ConcreteProduct2(); ConcreteProduct2(); }; #endif // PRODUCT_H #include "product.h" Product::~Product() { } Product::Product() { } ConcreteProduct1::~ConcreteProduct1() { } ConcreteProduct1::ConcreteProduct1() { m_icon = "qrc:/images/boy.png"; } ConcreteProduct2::~ConcreteProduct2() { } ConcreteProduct2::ConcreteProduct2() { m_icon = "qrc:/images/girl.png"; } 3. main.qml

    使用timer,canvas,listview等实现一个自动化生产的动画效果

    源代码

    Fork me on Gitee

    read more
  • blender建模 章鱼
    捕获2.PNG 😵

    read more

关注我们

微博
QQ群