Qml 和外部js文件协同工作

最新推荐文章于 2024-08-04 21:59:59 发布

炼气散人

最新推荐文章于 2024-08-04 21:59:59 发布

阅读量8.8k

点赞数 1

分类专栏： # c++ qt 文章标签： qt qml Javascript

本文链接：https://blog.csdn.net/csfreebird/article/details/18312037

版权

本文介绍如何使用`import as`语句在Qml文件中引入外部JavaScript文件。示例展示了一个包含Item的Qml文件，该Item位于另一个Rectangle内部。通过示例，解释了如何进行坐标转换，如将鼠标在r2坐标系的位置转换为r1坐标系，以及使用`mapToItem`方法将r1坐标系的鼠标位置映射到r2坐标系，强调了理解坐标系统的正确转换方向的重要性。

摘要由CSDN通过智能技术生成

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