打算模仿Blender的节点编辑器制作自己的节点编辑器



  • 因为我们的动作编辑器要进行更新,需要添加一些重要的功能,其中节点编辑器就是其中一项功能。所以这段时间我都在努力地尝试使用最新的控件库Qt Quick Controls 2来实现节点编辑器的功能。现在处于制作当中,先给大家看一看吧。

    0_1498638151560_0964f164-f2f8-405a-9578-d64aefeddc67-image.png



  • 我是模仿这样的节点编辑器进行制作的:
    0_1498638247060_598fe2bd-5805-4582-962e-ebd63edb66d9-image.png



  • 相关的Qt Quick 代码如下:

    import QtQuick 2.7
    import QtQuick.Controls 2.1
    import QtQuick.Layouts 1.3
    
    ApplicationWindow
    {
        visible: true
        width: 270
        height: 480
        title: qsTr("Node Editor 2")
    
        Flickable
        {
            anchors.fill: parent
            contentWidth: width
            contentHeight: height
    
            Frame
            {
                id: frame
                width: 200
                //height: 200
                x: ( parent.width - width ) / 2
                y: ( parent.height - height ) / 2
    
                ColumnLayout
                {
                    id: columnLayout
                    anchors
                    {
                        left: parent.left
                        right: parent.right
                    }
    
                    RowLayout
                    {
                        Layout.fillWidth: true
                        Image
                        {
                            Layout.preferredWidth: titleLabel.height
                            Layout.preferredHeight: titleLabel.height
                            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                            source: "qrc:/expand.png"
    
                            MouseArea
                            {
                                anchors.fill: parent
                                onClicked:
                                {
                                    print( "Expand button is clicked." );
                                }
                            }
                        }
    
                        Label
                        {
                            id: titleLabel
                            font.bold: true
                            text: "标37493879878789dafdafda"
                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                            Layout.fillWidth: true
                            elide: Label.ElideRight
    
                            MouseArea
                            {
                                anchors.fill: parent
                                drag
                                {
                                    target: frame
                                }
                            }
                        }
    
                        Image
                        {
                            Layout.preferredWidth: titleLabel.height
                            Layout.preferredHeight: titleLabel.height
                            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                            source: "qrc:/preview.png"
    
                            MouseArea
                            {
                                anchors.fill: parent
                                onClicked:
                                {
                                    preview.visible = !preview.visible;
                                }
                            }
                        }
                    }
    
                    ShaderEffect
                    {
                        id: preview
                        Layout.fillWidth: true
                        Layout.preferredHeight: width
                        property real gridLength: 16// Option.fontMetrics.height * 2
                        opacity: 0.3
                        fragmentShader:// 棋盘着色器
                            "
                                uniform highp float width;
                                uniform highp float height;
                                uniform highp float gridLength;
                                uniform highp float qt_Opacity;
                                varying highp vec2 qt_TexCoord0;
                                float Mod( int x, int y )
                                {
                                    return float( x ) - float( x / y ) * float( y );
                                }
                                void main( void )
                                {
                                    float mod2X = Mod( int( width * qt_TexCoord0.x / gridLength ), 2 );
                                    float mod2Y = Mod( int( height * qt_TexCoord0.y / gridLength + 0.5 ), 2 );
                                    vec4 barColor = vec4( 1.0 );
                                    if ( mod2X == 1.0 && mod2Y == 0.0 ||
                                         mod2X == 0.0 && mod2Y == 1.0 )
                                    {
                                        barColor = vec4( 0.0, 0.0, 0.0, 1.0 );
                                    }
                                    else
                                    {
                                        barColor = vec4( 1.0, 1.0, 1.0, 1.0 );
                                    }
                                    gl_FragColor = barColor * qt_Opacity;
                                }
                            "
                    }
    
                    Label
                    {
                        text: "测试"
    
                        Rectangle
                        {
                            width: height
                            height: parent.height / 2
                            x: -frame.leftPadding - width / 2
                            anchors.verticalCenter: parent.verticalCenter
                            radius: width / 2
                            color: "yellow"
                        }
                    }
    
                    Label
                    {
                        text: "测试 2"
    
                        Rectangle
                        {
                            width: height
                            height: parent.height / 2
                            x: -frame.leftPadding - width / 2
                            anchors.verticalCenter: parent.verticalCenter
                            radius: width / 2
                            color: "lightsteelblue"
                        }
                    }
                }
            }
        }
    }
    


  • @jiangcaiyang

    好像用贝塞尔曲线+canvas就可以实现节点之间的连线

    一些参考



  • @qyvlik打算模仿Blender的节点编辑器制作自己的节点编辑器 中说:

    @jiangcaiyang

    好像用贝塞尔曲线+canvas就可以实现节点之间的连线

    一些参考

    应该可以做到的,我详细看看,或许能够起到很好的作用。



  • 现在效果是这个样子了。慢慢好起来了呢。🍰
    0_1498645600901_2c521bb3-493b-4680-a3e7-c114fb714575-image.png



  • @jiangcaiyang 现在基本的节点编辑器是这个样子的😄
    0_1498749818285_2017-06-29-232214_642x516_scrot.png


 

最近的回复

关注我们

微博
QQ群











召唤伊斯特瓦尔