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 ⊙ )


 

走马观花

最近的回复

  • @bladesero Blender 在角色建模和渲染这些方面的确比较强。😄

    我们的软件还在发展中呢。
    18da2116-2055-47c1-8317-1ccde17dfcc0-image.png

    阅读更多
  • untitled.jpg figure角色(WIP2).jpg
    TIM截图20190117184210.png
    使用的软件是blender,zbrush和substance painter

    阅读更多
  • 背景:如果需要qml显示循环list,一般是用3个ListView循环交替,实现伪循环,期间逻辑复杂,容易出错,PathView本身自带循环,所以考虑用PathView实现循环

    设计:PathView显示5条数据,按照垂直List一个个排好顺序,由于收尾移动时候会空白穿帮,所以用clip控制显示中间三条数据

    滚动控制:currentIndex,decrementCurrentIndex(),incrementCurrentIndex()

    代码:

    Item{ id: item1 property int myIndex: 0 property int onePageCount: 3 property real oneHeight: 72 property real oneWidth: 580 property int isCurrentListView: 1 //0,1,2 property bool isAdd: true //direction,down=true,up=false property int hightlightIndex: 0 property int currentIndexPathView: 0 //use this Item{ id: itemClip width: item1.oneWidth height: item1.oneHeight*3 clip: true PathView { id: listView1 width: item1.oneWidth model: listModelSpeedWarning delegate: delegeteLine pathItemCount: item1.onePageCount+2 interactive: false path: Path { startX: item1.oneWidth/2 startY: -item1.oneHeight/2 PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*0+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*0+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*1+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*1+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*2+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*2+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*3+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*3+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*4+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*4+item1.oneHeight/2 } } Component.onCompleted: { listView1.currentIndex = -1 } } } }

    问题:windows下测试,按住按键不松手,list滚动会卡住,松手后恢复正常,看来list不能滚动太快

    阅读更多
  • H

    @青山白云 只是为了替换GIF,不过目前已经解决加载问题

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔