Qml中使用mapFromItem或mapToItem代替anchors

码农葫芦侠

已于 2024-06-14 10:11:44 修改

阅读量466

点赞数 3

分类专栏：实战应用 Qt 文章标签：开发语言 qt qml 前端

于 2023-06-14 16:32:24 首次发布

本文链接：https://blog.csdn.net/qq_41898196/article/details/131209860

版权

实战应用同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

文章介绍了在QML中，当无法使用anchors属性进行对象定位时，如何利用mapFromItem和mapToItem函数进行坐标转换。这两个函数用于在不同对象的坐标系统之间映射点或区域，考虑了对象的位置、缩放、旋转等因素。文中强调了在使用这些函数时要注意确保对象已加载完成，并提供了一个示例，展示如何将item控件定位在image底部居中，避免在image未加载完成时进行映射导致的问题。

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

背景

某些情况下我们无法使用anchors该属性，因为anchors的目标只能是父对象或者同级对象。使用mapFromItem或者mapToItem可以很好的解决这个问题，但是使用这两个函数有一些坑需要注意。

mapFromItem 与 mapToItem

本文不着重介绍这两个函数，侧重讲解使用过程规避的坑。这里简单引用一下。

mapFromItem的原文介绍为：

object mapFromItem(Item item, point p)
object mapFromItem(Item item, real x, real y)
object mapFromItem(Item item, real x, real y, real width, real height)
object mapFromItem(Item item, rect r)

Maps the point (x, y) or rect (x, y, width, height), which is in item's coordinate system, to this item's coordinate system, and returns a point or rect matching the mapped coordinate.
The following properties of the item are used in the mapping: x, y, scale, rotation, transformOrigin, and transform.
If item is a null value, this maps the point or rect from the coordinate system of the root QML view.
The versions accepting point and rect are since Qt 5.15.

意思是将函数调用者所在坐标系中的(x,y)映射到item所在的坐标系中，返回映射后的点。

mapToItem的原文介绍为：


object mapToItem(Item item, point p)
object mapToItem(Item item, real x, real y)
object mapToItem(Item item, real x, real y, real width, real height)
object mapToItem(Item item, rect r)

Maps the point (x, y) or rect (x, y, width, height), which is in this item's coordinate system, to item's coordinate system, and returns a point or rect matching the mapped coordinate.
The following properties of the item are used in the mapping: x, y, scale, rotation, transformOrigin, and transform.
If item is a null value, this maps the point or rect to the coordinate system of the root QML view.
The versions accepting point and rect are since Qt 5.15.

意思是将item所在坐标系中的(x,y)映射到函数调用者所在的坐标系中，返回映射后的点。

示例

如果你有一个item控件想要排列在image的底部居中，这种情况下无法使用anchors属性，因为image不是item的父对象或同级对象。使用mapFromItem或者mapToItem的最好方法是等待item与image均加载完成后再通过binding函数布局。

import QtQuick 2.15
Window {
	id: root
	function 
	Item {
		id: item
		// 以下这种做法有问题，当image控件还没加载完成的时候，会显示异常
		// x: item.mapFromItem(image, image.width/2, image.height).x
        // y: item.mapFromItem(image, image.width/2, image.height).y
	}
	Control {
		id: control
		Image {
			id: image
			Component.onCompleted: {
				item.x = Qt.binding(function() { return root.mapFromItem(image, image.width/2, image.height).x; })
                item.y = Qt.binding(function() { return root.mapFromItem(image, image.width/2, image.height).y; })
			}
			anchors.centerIn: parent
			width: 100
			heigth: 100
		}// Image
		
	}// Control
	
}// Window