QML：拖动曲线坐标点修改曲线

原创

已于 2023-09-25 17:27:37 修改 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #qt #c++ #ui #qml

于 2023-09-25 17:00:03 首次发布

文章介绍了如何通过QtQuick和QtCharts库在QML中实现移动滑块控制折线图的坐标点，包括滑块的可编辑性、鼠标事件处理和坐标转换，以实现实时图形更新。

通过移动坐标点上的滑块实现修改折线的坐标点的值。具体效果如下：

大体分为两点：1、实现可移动的滑块，并获取实时x,y坐标。

2、根据滑块的x，y坐标转换为折线图上的坐标点并实时更新折线。

一、可移动滑块的实现

完整代码：

import QtQuick 2.0

Item {
    property real mouseXTMP: 0   //鼠标坐标临时值
    property real mouseYTMP: 0

    property string backgroundDefaultImage: imageSource("heat_curve_point_unselected")  //滑块选中和未选状态图片
    property string backgroundActiveImage: imageSource("heat_curve_point_selected")
    property bool clickedFlag: false    //滑块的状态标志
    property bool editEnable: false   //可编辑标志
    onEditEnableChanged: {
        if(!editEnable)
            clickedFlag = false
    }

    property string movingDirection: "Arbitrary"   //Horizontal  Vertical   Arbitrary
    property int y_Max: 371
    property int y_Min: 33
    property int x_Max: 800
    property int x_Min: 33
    property int curVal: 35

    signal mousePosition(int x_pos,int y_pos)
    signal btnClicked()

    id: rect
    width: 70
    height: 80
    Rectangle{
        id:btn_temp_rect
        width: 52
        height: 28
        color: "#161821"
        radius:4
        visible: !clickedFlag
        anchors.horizontalCenter: parent.horizontalCenter
        Text{
            id:btn_temp_text
            anchors.fill: parent
            text: curVal + "\u00B0C"
            color: "#FFFFFF"
            font.pixelSize: 16
            opacity: 0.6
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignTop
        }
    }
    Item{
        width: 70
        height: 70
        anchors.bottom: parent.bottom
        Image {
            id:activeImage
            width: 70
            height: 70
            anchors.fill:parent
            visible: {
                if(backgroundActiveImage === backgroundDefaultImage)
                    return false
                else
                    return clickedFlag
            }
            source:backgroundActiveImage
        }
        Image {
            id:defaultImage
            width: 30
            height: 30
            anchors.centerIn: parent
            visible:{
                if(backgroundActiveImage === backgroundDefaultImage)
                    return true
                else
                    return !clickedFlag
            }
            source:backgroundDefaultImage
        }
    }
    MouseArea {
        anchors.fill: parent
        onPressed: {
            if(editEnable){
//                if(!clickedFlag)
//                    clickedFlag = !clickedFlag  //切换状态标志,取消选中由外面操作，当其他滑块被选中才取消选中状态
                mouseXTMP = mouseX
                mouseYTMP = mouseY
                rect.btnClicked()
            }
        }
        onPositionChanged: {
            if(editEnable){
                var tmpX = mouseX + rect.x - mouseXTMP  //计算移动后的坐标
                var tmpY = mouseY + rect.y - mouseYTMP
                if(tmpX<=x_Min - rect.width/2)
                    tmpX = x_Min - rect.width/2
                if(tmpX>=x_Max - rect.width/2)
                    tmpX = x_Max - rect.width/2
                if(tmpY<=y_Min - rect.width/2 -10)
                    tmpY = y_Min - rect.width/2 -10
                if(tmpY>=y_Max - rect.width/2 -10)
                    tmpY = y_Max - rect.width/2 -10