Qml 和外部js文件协同工作

可以用import as语句将外部js文件引入到qml文件中，下面定义了一个qml文件，里面只有一个Item.

import QtQuick 2.0
import "handler.js" as Handler

Item {
    id: top_item
    width: 380
    height: 200
    MouseArea { 
        anchors.fill: parent

        onPressed: Handler.onPressed(mouse);
    }

}

看一下handler.js文件：

function onPressed(mouse) {
    console.log(mouse.x, mouse.y);
}

当鼠标单击的时候，控制台将打印光标的位置。

再复杂一点，让qml的Item在另一个Rectangle里面, 然后转换坐标位置：

import QtQuick 2.0
import "handler.js" as Handler

Rectangle {
    id: r1
    width: 400
    height: 400
    Item {
        id: i1
        anchors.fill: parent.fill
        Rectangle {
            id: r2
            width: 200
            height: 200
            color: "red"
            anchors.left: parent.left
            anchors.leftMargin: 100
            anchors.top: parent.top
            anchors.topMargin: 100
            MouseArea {
                anchors.fill: parent
                onPressed: Handler.onPressed(mouse);
            }
        }

    }
}

handler.js文件：

function onPressed(mouse) {
    console.log("postion in r2 Rectangle");
    console.log(mouse.x, mouse.y);

    console.log("postion in r1 Rectangle");
    var pos = r1.mapFromItem(r2, mouse.x, mouse.y);
    console.log(pos.x, pos.y);
}

运行一下：

 ~/Qt5.2.0/5.2.0/gcc_64/bin/qmlscene ./test1.qml

鼠标点击红色区域后，控制台输出：

postion in r2 Rectangle
114 119
postion in r1 Rectangle
214 219

r1.mapFromItem(r2, mouse.x, mouse.y) 意思是将

r2坐标系的鼠标位置转换成r1坐标系的位置。

还有mapToItem，刚好相反，是将r1坐标系下的鼠标位置转换到r2的坐标系下，注意不要看反了。

http://doc-snapshot.qt-project.org/qdoc/qml-qtquick-item.html#mapToItem-method-2