为萌梦动作编辑器写插件



  • 写在前面

    萌梦动作编辑器已经对外发布有一段时间了,细心的朋友可能注意到新版萌梦动作编辑器在设置页面上拥有“插件”一栏。这一栏的学问可大哩,因为它允许第三方开发者和机构使用萌梦动作编辑器的功能,并且将其扩展开来。达到协同开发解耦的目的。对于用户来说,只要第三方开发者将插件发布到网络上,那么用户就可以不用下载,即时打开就可以使用该插件。使用插件就像打开网页一样容易。

    了解萌梦动作编辑器插件的使用

    那么介绍了这么多,该如何使用插件呢?首先下载萌梦动作编辑器,如果没有动作编辑器的话,可以到这里下载。
    coding源
    github源

    以萌梦动作编辑器Windows版为例,我们下载后运行的效果如下:
    0_1521620523210_4fd2e669-1c3a-4939-95f9-45e1a7707054-image.png

    我们可以点击任一面板的三点,弹出菜单:
    0_1521621082575_a180f237-7730-4643-bc53-d4d0c583c69b-image.png
    在菜单中我们选择“设置”菜单,然后进入设置面板。选择插件标签页,进入插件:
    0_1521621208220_aff66c1a-fb10-4804-a9a7-228f4ef54816-image.png

    我们可以尝试一下,输入一个测试插件地址(在github上,某些网络需要翻墙),然后点击右下角的 + 号按钮,单击输入修改插件的地址,输入以下的内容:

    https://raw.githubusercontent.com/jiangcaiyang/QtDreamTestPlugin/master
    

    0_1521622898895_02ad66e6-4e05-4a5e-9d64-d0aa5c75de59-image.png
    最后按下TAB键或者点击其它地方进行保存。然后重启,试试看,有惊喜!

    这个时候点击任一界面的菜单栏,会发现多出了一个菜单,名称叫“HelloWorld”,没错,这就是我们新添加的插件。
    0_1521623057071_42b54149-2f72-420d-98ef-35a755fcb115-image.png

    点击HelloWorld,即可查看到插件的内容了。
    0_1521623117135_c9031a14-f199-4e15-ac9f-d4a760289453-image.png



  • 插件的介绍

    插件是基于Qt和QML技术的一种可执行的代码。您可以把它看作是小程序。实际上,一些插件能够做到的不只是小程序,也可以是很复杂的工具。例如我们的动作编辑器其中的一个核心的插件就是motioneditor。这个插件定义了与动作编辑器相关的页面,并且实现了与动作编辑相关的大部分操作。

    按照实现插件的技术,我们将插件分为纯QML插件和QML和C++混合插件。纯QML插件只依赖QML语言本身,所以既可以放在本地,也可以挂在互联网,像普通页面一样;而QML和C++混合的插件则是将QML很难甚至无法实现的操作交由C++来处理,因此只能放在本地。在实际操作中,一些依靠界面就能够实现的效果,可以使用QML插件来实现;而另外一些复杂的插件,则须通过QML和C++混合而成。



  • 这个我要好好学习一下



  • 纯QML插件的写法

    如果您想在萌梦动作编辑器上制作一些简单的功能,例如记事本、一键访问网站等等功能,那么可以尝试书写一下纯QML插件。萌梦动作编辑器在安装后已经备齐了所需要的插件依赖,因此您只需要在QML声明导入的模块就可以了。
    一位网友写了这样一个有意思的插件:
    很有意思的插件
    虽然看上去只是控件的堆积,但是它也说明了萌梦动作编辑器可以接受各种类型的插件,其中的变化还是非常丰富的。

    那么,如何制作自己的第一个插件呢?我将第一个插件放在github中了,它简单地展示了萌梦动作编辑器插件的制作方法。

    首先进入github这个地址查看一下文件目录结构。可以看到,它是包含了一些必要的文件的。我们首先来看看qmldir文件。

    Main 1.0 Main.qml
    internal HelloWorldPage HelloWorldPage.qml
    

    qmldir文件比较简单,只有两行,因为他是路径列表文件,所以语法较为简单。第一行表明插件的入口类是Main,而它的文件名则是Main.qml,当然您也可以不拘泥于Main.qml,甚至您可以书写任意命名的qml文件。萌梦动作编辑器会尝试载入它,以作为插件的入口类来进行处理。第二行则是用internal限定了插件内的页面,也就是说,插件的调用者是无法调用到HelloWorldPage这个qml文件的。这有一个好处,那就是仅让调用者合理调用部分qml文件,防止乱来。



  • 接下来介绍的就是Main.qml文件了。Main.qml作为插件的入口,起到了中枢的作用,下面是Main.qml的内容:

    import QtQuick 2.10
    import QtDream.Core 3.3
    import QtDream.Plugin 1.0
    import QtDream.Settings 1.1
    
    QtObject
    {
        id: root
    
        property PageMenuItem helloWorldPageItem: PageMenuItem
        {
            text: qsTr( "Hello World" ) + Translator.notifier
            url: Qt.resolvedUrl( "HelloWorldPage.qml" )
        }
    
        Component.onCompleted:
        {
            var settings = PluginManager.hook( "settings::Settings" );
            settings.pageMenu.addMenuItem( helloWorldPageItem );
            console.log( "HelloWorld插件初始化成功了!" );
        }
    }import QtQuick 2.10
    import QtDream.Core 3.3
    import QtDream.Plugin 1.0
    import QtDream.Settings 1.1
    
    QtObject
    {
        id: root
    
        property PageMenuItem helloWorldPageItem: PageMenuItem
        {
            text: qsTr( "Hello World" ) + Translator.notifier
            url: Qt.resolvedUrl( "HelloWorldPage.qml" )
        }
    
        Component.onCompleted:
        {
            var settings = PluginManager.hook( "settings::Settings" );
            settings.pageMenu.addMenuItem( helloWorldPageItem );
            console.log( "HelloWorld插件初始化成功了!" );
        }
    }
    

    可以看到,main.qml核心是QtObject类,然后其中包含了跳转到HelloWorldPageMenuItem。在这个Component构造完毕后,会通过PluginManagerhook方法获取到设置的引用,然后在其中的pageMenu属性中加入helloWorldPageItem。最后在控制台输出信息。这里牵涉到插件钩子的一个概念,我们在后面予以讲解。

    最后就是HelloWorldPage.qml文件了,它就是我们主要的页面内容。

    import QtQuick 2.10
    import QtQuick.Controls 1.4
    import QtDream.Core 3.2
    import QtDream.Controls 1.9
    
    Page
    {
        id: page
        implicitWidth: 270
        implicitHeight: 480
    
        menuBar: MenuBar
        {
            Menu
            {
                title: qsTr( "Hello World" ) + Translator.notifier
            }
        }
    
        NumberInput
        {
            anchors.centerIn: parent
            parent: page.contentItem
            width: page.width / 2
            min: 1
            max: 10000
            name: " 你今天的能量是多少?"
            quantifier: "牛 "
        }
    }
    

    页面包含了MenuBar以及NumberInput。输出的效果就如文章标题那样。需要注意的是,NumberInput不是标准Qt Quick Controls 1的内容,而是Qt Dream Controls的内容。其实也是一些控件组合起来的,这点需要注意。


 

走马观花~

最近的回复

  • 感觉很棒的样子,还有谜之抖动特效😍

    阅读更多
  • 这次在QWidget里面嵌入了qml,正好赶上七夕,就制作了这个小程序。
    随着七夕临近,牛郎和织女会相遇!

    0_1534381046875_163cc660-5a5e-46d1-ac5e-0414a2252644-image.png

    源代码

    Fork me on Gitee

    加了特效的桌面

    0_1534402386328_20180816_144729 (2).gif

    阅读更多
  • @jiangcaiyang 有源代码哦

    阅读更多
  • 很棒!求软件,我要摆在我的桌面上。

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔