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

Qml 和外部js文件协同工作

鼠标点击红色区域后,控制台输出:

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


Qml 和外部js文件协同工作

上一篇:解决ExtJs纵坐标值重复的问题


下一篇:Photoshop设计制作霸气的服装促销海报