Qml-Item的函数使用

Qml-Item的函数使用

Item的提供了一些函数用于处理item之间父子关系，焦点链，以及item之间的坐标转换，本文重点示范item之间的坐标转换

Item的函数

1. 函数childAt(real x,real y) ：在item所在坐标系中，返回点point(x,y)处的第一个可视元素；
2. 函数bool contains(point point) ：在item所在坐标系中，点point是否在item中
3. 函数point mapFromItem(Item item1, point p) ：有4个重载函数，将item1对象中的 p点，转换到当前对象中对应点。src:item1, dst:当前对象
4. 函数point mapToItem(Item item1, point p) ：有4个重载函数，将当前对象中的 p点，转会到item1中应点。src:当前对象, dst:item1
5. 函数** point mapFromGlobal(real x, real y)**: 将全局点point(x,y) 转换到当前对象中对应的点
6. 函数point mapToGlobal(real x, real y): 将当前对象中点point(x,y) 转换到全局坐标系中对应的点

Item函数使用实例代码

在Rectangle中方一个MouseArea 和 两个子Rectangle,然后根据鼠标点击，调用Item公用函数，代码如下：

	import QtQuick

//验证Item中公用方法
Item{

    height: 480
    width: 320

    Rectangle{
        id:idRecPar
        x:10
        y:10
        width: 200
        height:200

        MouseArea{
            anchors.fill: parent

            onClicked:(mouse)=> {
                console.log("mouseX = " + mouseX + " mouseY = " + mouseY + " .x = " + mouse.x +" .y = " + mouse.y);

                var item = parent.childAt(mouse.x,mouse.y);                         //childAt() 获取在item坐标系中点（x,y）处的第一个子对象
                if(item === null)
                {
                    console.log("is null");
                    return;
                }
                //else
                    //console.log("clicked item ",item.id);
                if(item === idRecChild1)
                {
                  console.log("is child1");
                }
                else if(item === idRecChild2){
                    console.log("is child2");
                }

                var point2 = parent.mapToItem(idRecChild1, mouseX,mouseY);        //parent坐标系中点（x,y）转换到idRecChild1对象的坐标系中对应的点
                console.log("point 2 = ",point2);
                if(idRecChild1.contains(point2)){
                    console.log("in idRecChild1");
                    //point2 转到父对象中
                    var point3 = parent.mapFromItem(idRecChild1,point2);            //将idRecChild1中point2 点，转化到parent坐标系中对应点
                    console.log("point3 = ",point3);
                    if(point3.x === mouse.x && point3.y === mouse.y)
                    {

                    }
                }

                //发现mapToItem 和 mapFromItem, 浮点坐标可能转换出来都是浮点整数了，如果进行相应的 ===判断，可能出错
                var global1 = parent.mapToGlobal(mouse.x,mouse.y);                  //转为全局坐标
                var point4 = idRecChild1.mapFromGlobal(global1);
                console.log("global1 = ",global1," point 4 = ",point4);
                if(point4 === point2)
                {

                }

            }
        }

        Rectangle{
            id:idRecChild1
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.margins: 10
            width: 80
            height:80
            color:"lightgreen"
        }

        Rectangle{
            id:idRecChild2
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.margins: 10
            width: 80
            height:80
            color:"lightblue"
        }
    }
}

Item函数运行输出如下

此处有个特殊现象：mapToItem() 和 mapFromItem(), 浮点坐标可能转换出来都是浮点整数了，如果进行相应的 ===判断，可能出错;