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


 

走马观花

最近的回复

  • MStatus是描述Maya状态的一个类。其中MStatus.perror()表示在Output Window中显示错误信息。
    MPxLocatorNode 是NPxNode的一个子类,它表示的是类似坐标轴等辅助的节点,它不参加渲染,只是起辅助作用。可以使用原生的OpenGL调用。
    MPxDeformerNode 是描述的是形变的节点,定义的是形变的内容。

    获取物体的类别可以写这样的Python代码:
    import maya.cmds
    print cmds.getClassification( "lambert" )
    可得:[u'drawdb/shader/surface/lambert:shader/surface']
    参考:https://help.autodesk.com/view/MAYAUL/2019/CHS/?guid=__CommandsPython_getClassification_html

    MPx开头的类表明是Proxy的类
    MFn开头的类表明是Function Set类

    Maya的例子FootPrintNode和RawFootPrintNode的区别是RawFootPrintNode它有实现draw()函数,它实现了跨渲染器(DX和OpenGL)的渲染。😛

    阅读更多
  • 由于我使用的是Maya 2018,而Maya 2018是在Visual Studio 2017上进行编译的,所以我们需要下载Visual Studio 2017。
    1、首先打开Visual Studio 2017,创建一个简单的VS项目。Ctrl + Shift + N,使用Windows桌面向导进行创建。

    注意不要创建stdafx.h 头,不使用stdafx头进行构建。
    然后创建一个文件FirstMayaPlugin.cpp 进行处理。

    2、将Debug改为ReleaseDebug,并且将win32改为x64。

    3、设置下面的属性
    3.1 附加包含目录中,要有D:\Develop\devkitBase\include
    3.2 优化改为已禁用,为了调试符号的正确性
    3.3 预处理宏中添加这些:

    NDEBUG OSWin_ WIN32 _WINDOWS _USRDLL NT_PLUGIN _HAS_ITERATOR_DEBUGGING=0 _SECURE_SCL=0 _SECURE_SCL_THROWS=0 _SECURE_SCL_DEPRECATE=0 _CRT_SECURE_NO_DEPRECATE TBB_USE_DEBUG=0 __TBB_LIB_NAME=tbb.lib Bits64_

    3.4 附加库目录设为D:\Develop\devkitBase\lib
    3.5 附加依赖项设为
    Foundation.lib
    OpenMaya.lib
    3.6 改目标文件扩展名为.mll

    4、在FirstMayaPlugin.cpp 中添加以下的代码:

    #include <maya/MStatus.h> #include <maya/MObject.h> #include <maya/MFnPlugin.h> #include <maya/MStatus.h> #include <maya/MObject.h> #include <maya/MFnPlugin.h> MStatus initializePlugin( MObject obj ) { MStatus status; MFnPlugin plugin( obj, "Next Digital", "1.0", "Any" ); return status; } MStatus uninitializePlugin( MObject obj ) { MStatus status; return status; }

    就可以顺利地编译了。

    这个插件就可以在Maya中顺利地进行载入了。

    阅读更多
  • 一些数据结构以及释义
    MVertexBuffer:对显卡的Vertex Buffer进行封装;
    MIndexBuffer:对显卡的Index Buffer进行封装;
    MGeometryRequirement
    MRenderItem:渲染的项目,包含了一个index buffer,多个vertex buffer,选定的着色器
    renderpasses:渲染的次数
    MVertexBufferDescriptor
    MVertexBufferDescriptionList
    MRenderItemList
    MPxDrawOverride:重新组织渲染语言的API,包括OpenGL的调用
    MPxGeometryOverride:整合外部着色器和DAG对象
    MPxShaderOverride:低层着色组织
    NPxSbadingNodeOverride:如何插件与其它软件的交互
    对比:NPxShaderOverride:全部渲染网络需要,NPxShadingNodeOverride:仅仅与其它插件的交互

    RenderOperation:类似一个renderpass
    渲染的Operation
    1、背景的Operation
    2、3D场景的Operation
    3、2D的HUD的Operation
    4、用户自定义Operation
    5、四方blt的Operation
    6、对象presentation的Operation

    MShaderManager

    开发者例子:viewRenderOverride

    Maya的渲染节点构成的是DAG(有向无环图),包含了transforms和shapes。
    MFnAssembly、MPxAssembly。

    阅读更多
  • 网上被黑客服都会说1,你的账户存在风险需要你提供身份信息2,银行维护,3, 系统维护,,出款系统维护4 你的账户存在套利遇到这些情况其实就是他们想黑你,正规的也是存在维护的,银行也确实会维护,但只要超过一天以上,那你基本就是被黑了,所以还是劝朋友们远离赌博,因为网络虚拟无保障,所以很多玩家被假网黑钱的事时有发生。国内法律不允许。
    虚拟的网络世界真真假假,虚虚实实。网上娱乐的黑网也是铺天盖地,不计其数。网赌被黑出款扣193+5829*223、以及出黑中的各种骗局,防不胜防。网赌害人!远离网赌

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔