可以用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