QT数据可视化框架编程实战之三维曲面图QML组件 使用高度图生成三维曲面图 补天云QT技术培训专家

QT数据可视化框架编程实战之三维曲面图 使用高度图生成三维曲面图 补天云QT技术培训专家

简介

本文将介绍如何使用QT数据可视化框架中的QT三维曲面图QML组件，通过一幅高度图的图片来生成三维曲面图。QT数据可视化框架提供了三维曲面图这种可视化类型。使用QT三维曲面图类型时，可以通过加载一幅高度图的图片作为数据源，自动生成对应的三维曲面图。

文章目录

• QT三维曲面图组件的数据类型
• • QT三维曲面图组件C++类型Q3DSurface
  • QT三维曲面图序列类型QSurface3DSeries
  • QT三维曲面图组件QML类型Surface3D
  • QT三维曲面序列类型Surface3DSeries
• QT三维曲面图应用实例运行效果
• • 运行效果视频演示
• QT三维曲面图应用实例源码

正文

QT三维曲面图组件的数据类型

QT三维曲面图组件C++类型Q3DSurface

This class enables developers to render 3D surface plots and to view them by rotating the scene freely. The visual properties of the surface such as draw mode and shading can be controlled via QSurface3DSeries.

QT三维曲面图序列类型QSurface3DSeries

QSurface3DSeries序列类型和Q3DSurface曲面图类型搭配使用。这个类型使用的数据代理类是QSurfaceDataProxy类型。

SurfaceDataProxy。这个代理类型有两个派生类型：
QItemModelSurfaceDataProxy （QT条目模型曲面数据代理，即是QT模型视图代理中的模型数据作为数据源）
QHeightMapSurfaceDataProxy （QT高度图曲面数据代理，即是使用高度图图片作为数据源）

具有以下几种具体标记：
QSurface3DSeries::DrawWireframe （画线框）
Only the grid is drawn.

QSurface3DSeries::DrawSurface （画曲面）
Only the surface is drawn.

QSurface3DSeries::DrawSurfaceAndWireframe （画线框和曲面）
DrawWireframe | DrawSurface
Both the surface and grid are drawn.

QT三维曲面图组件QML类型Surface3D

这个QML类型使得我们可以在QML应用程序中使用QT三维曲面图组件。

QT三维曲面序列类型Surface3DSeries

Surface3DSeries这个QML类型用于在QML应用中表示曲面序列。与之对应的数据代理类型是SurfaceDataProxy。这个代理类型有两个派生类型：
ItemModelSurfaceDataProxy （QT条目模型曲面数据代理，即是QT模型视图代理中的模型数据作为数据源）
HeightMapSurfaceDataProxy （QT高度图曲面数据代理，即是使用高度图图片作为数据源）

QT三维曲面图应用实例运行效果

实例所使用的高度图图片:

实例运行效果如下所示：

点击三维图面图之后的效果：

运行效果视频演示

本文描述的应用程序运行效果视频演示如下所示：

P86 QT数据可视化框架 QT使用高度图生成三维曲面图 补天云QT技术培训专家

本文对应的演示视频链接如下所示：
QT数据可视化框架 QT使用高度图生成三维曲面图 补天云QT技术培训专家

QT三维曲面图应用实例源码

QT三维曲面图应用实例源码如下所示：

//主窗口
Window {
    id: root
    width: 1900
    height: 1000
    visible: true
    title: qsTr("补天云QT系列视频课程 QT数据可视化 QT高度图生成三维曲面")

    //渐变色
    ColorGradient {
        id: surfaceGradient
        ColorGradientStop { position: 0.0; color: "darkgreen"}
        ColorGradientStop { position: 0.15; color: "darkslategray" }
        ColorGradientStop { position: 0.7; color: "peru" }
        ColorGradientStop { position: 1.0; color: "white" }
    }

    //三维曲面
    Surface3D {
        id: surfacePlot
        width: root.width
        height: root.height
        aspectRatio: 3.0
        theme: Theme3D {
            type: Theme3D.ThemeStoneMoss
            font.pointSize: 36
            colorStyle: Theme3D.ColorStyleRangeGradient
            baseGradients: [surfaceGradient]
        }
        shadowQuality: AbstractGraph3D.ShadowQualityMedium
        selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndRow
        scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeft
        axisX.segmentCount: 3
        axisX.subSegmentCount: 3
        axisX.labelFormat: "%i"
        axisZ.segmentCount: 3
        axisZ.subSegmentCount: 3
        axisZ.labelFormat: "%i"
        axisY.segmentCount: 2
        axisY.subSegmentCount: 2
        axisY.labelFormat: "%i"
        axisY.title: "高度 (m)"
        axisX.title: "经度 175.x\"E"
        axisZ.title: "维度 -39.x\"N"
        axisY.titleVisible: true
        axisX.titleVisible: true
        axisZ.titleVisible: true

        //三维曲面序列
        Surface3DSeries {
            id: heightSeries
            flatShadingEnabled: false
            drawMode: Surface3DSeries.DrawSurface

            HeightMapSurfaceDataProxy {
                //三维曲面使用的高度图
                heightMapFile: "://ButianyunHeightMap/heightmap.png"
                autoScaleY: true
                minYValue: 740
                maxYValue: 2787
                minZValue: -374 // ~ -39.374411"N
                maxZValue: -116 // ~ -39.115971"N
                minXValue: 472  // ~ 175.471767"E
                maxXValue: 781  // ~ 175.780758"E
            }
        }
    }

    Text {
        anchors.centerIn: parent
        font.bold: true
        font.pixelSize: 72
        color: "red"
        text: "QT数据可视化组件\nQT高度图生成三维曲面\n补天云QT技术培训专家"
        horizontalAlignment: Qt.AlignHCenter
    }
}

总结

本文介绍了如何使用QT数据可视化框架中的QT三维曲面图QML组件，通过一幅高度图的图片来生成三维曲面图。本文还展示了QML程序生成的三维曲面图，以及对应的QML源码。

如果您认为这篇文章对您有所帮助，请您一定立即点赞+喜欢+收藏，本文作者将能从您的点赞+喜欢+收藏中获取到创作新的好文章的动力。如果您认为作者写的文章还有一些参考价值，您也可以关注这篇文章的作者。