GridLine.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
  visible: true
  width: 1024
  height: 768
  title: qsTr("GRID")


  Rectangle {
    id: root
    anchors.fill: parent
    color: "#ccc"

    TextArea {
      anchors.centerIn: parent
      text: "TEXT BEHIND GRID"
      font.pointSize: 24
      style: TextAreaStyle {
        textColor: "darkblue"
        backgroundColor: "gray"
      }
    }

    property int numGridRow: 80
    property int numGridCol: 20

    MouseArea {
      property vector2d dragStart
      acceptedButtons: Qt.LeftButton
      anchors.fill: parent
      onPressed: {
        dragStart = Qt.vector2d(mouseX, mouseY)
      }
      onReleased: {
        mouseRect.height = 0;
      }
      onPositionChanged: {
        if(pressed) {
          mouseRect.x = Math.min(mouseX, dragStart.x)
          mouseRect.width = Math.abs(mouseX - dragStart.x)
          mouseRect.y = Math.min(mouseY, dragStart.y)
          mouseRect.height = Math.abs(mouseY - dragStart.y)
        }
      }
    }

    Rectangle {
      id: mouseRect
      color: "#808080ff"
    }

    Column {
      anchors.fill: parent
      Repeater {
        model: root.numGridRow
        Rectangle {
          width: root.width
          height: root.height / root.numGridRow
          color: "transparent"
          border {
            color: "black"
            width: 1
          }
        }
      }
    }

    Row {
      anchors.fill: parent
      Repeater {
        model: root.numGridCol
        Rectangle {
          width: root.width / root.numGridCol
          height: root.height
          color: "transparent"
          border {
            color: "black"
            width: 1
          }
        }
      }
    }

//    Grid {
//      columns: root.numGridCol
//      Repeater {
//        model: root.numGridCol * root.numGridRow
//        Rectangle {
//          width: root.width / root.numGridCol
//          height: root.height / root.numGridRow
//          color: "transparent"
//          border {
//            color: "black"
//            width: 1
//          }
//          MouseArea {
//            anchors.fill: parent
//            onClicked: {
//              console.log(index)
//            }
//          }
//        }
//      }
//    }
  }
}