mfc如何删除lineto画的_如何用Qt Quick来做简单优雅的JSON可视化

最新推荐文章于 2024-09-06 23:00:48 发布

weixin_39796752

最新推荐文章于 2024-09-06 23:00:48 发布

阅读量127

点赞数

文章标签： mfc如何删除lineto画的

JSON是我们开发时候常用的交换数据格式，简单优雅。但再简单的数据格式，都没有图表来得直观，所以需要JSON可视化。一般的JSON可视化无非就是按照层级关系弄成缩进，例如下面这样的结果：

虽然比代码直观，但是跟下面的比呢？哪个更好？

今天就是想跟大家说个用Qt Quick实现JSON可视化的简单优雅的方法。

核心问题包括下面几个方面：

对JSON数据进行解析，我使用的是递归方法，比较容易理解。
同层级的节点放进一个ColumnLayout中，轻松实现均匀排布。
对JSON的数据类型需要判断，在JS中不好做，所以放在C++中实现，这里就涉及到如何在C++中构造QML对象以及设置属性。

C++中构造QML对象和设置属性的代码如下：

QQuickItem *FluxHub::createLevelItem(int level, QQuickItem *parentItem)
{
    auto *component = level >= m_levelComponents.count()?
                m_levelComponents.back() : m_levelComponents[level];
    auto item = qobject_cast<QQuickItem*>(component->create());

    if(item == nullptr){
        qWarning()<<"Create level item error!"<<component->errorString();
        return nullptr;
    }
    QQmlProperty layoutProp(parentItem, "childrenLayout");
    if(layoutProp.type() == QQmlProperty::Invalid){
        item->setParentItem(parentItem);
    }else{
        auto layout = layoutProp.read().value<QQuickItem*>();
        Q_ASSERT(layout);
        item->setParentItem(layout);
    }

    QQmlProperty colorProp(item, "color");
    colorProp.write(levelColor(level));
    return item;
}

连线我是用Canvas画的，在Node.qml中可以看到：

Canvas{
    id: lineCanvas
    anchors.fill: parent
    onPaint: {
        var ctx = getContext("2d");
        ctx.reset();
        var pt1 = mapFromItem(nodeContentRect, nodeContentRect.width, nodeContentRect.height / 2);
        for(var i = 0; i !== childrenLayout.children.length; ++i){
            var item = childrenLayout.children[i];
            var pt2 = mapFromItem(item.nodeRect, 0, item.nodeRect.height / 2);
            ctx.moveTo(pt1.x, pt1.y);
            //ctx.lineTo(pt2.x, pt2.y);
            ctx.bezierCurveTo(pt1.x + 20, pt1.y, pt2.x - 20, pt2.y, pt2.x, pt2.y);
        }
        ctx.strokeStyle = "#969f95";
        ctx.lineWidth = 2;
        ctx.stroke();
    }
}

本身比较简单，所以也不过多展开讲了，用的都是之前几篇文章中讲过的技术。源码我放在了GitHub上，大家感兴趣的可以编译运行看看：

cjmdaixi/QuickJSONViewergithub.com