IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> QGraphicsItem图元坐标和在场景中的坐标(六) -> 正文阅读

[移动开发]QGraphicsItem图元坐标和在场景中的坐标(六)

系列文章目录

QGraphicsItem图元的简单使用(一)
QGraphicsItem图元拖动绘制(二)
QGraphicsItem图元旋转缩放和自定义图元(三)
QGraphicsItem鼠标拖动图元进行缩放拉伸(四)
QGraphicsItem鼠标拖动旋转(五)



前言

该篇讲解一下图元自己的坐标、以及图元所在场景中的坐标,如果使用Qt自带的图元(比如QGraphicsRectItem或QGraphicsItemGroup等),往场景中添加图元坐标时,就会变得不可控,特别是需要复制粘贴当前图元、或者是移动后再复制粘贴当前图元,坐标系统没搞懂,那么图元位置就会变得不固定


一、坐标概念

该系列第一章有简单介绍过,图元坐标以图元中心为原点;
简单点理解,你就把图元当成一个点,而这个点就是图元的中心点;
而图元所在场景中的点,你简单理解,就是图元的中心点,所在场景中的坐标

二、步骤说明

1.打印坐标

先画一个矩形,打印出它的场景pos、rect以及中心点pos
在这里插入图片描述
打印结果如下:

scenePos = QPointF(1,3) rect = QRectF(0,0 288x186) centerPos = QPointF(144,93)

再反向画一个矩形,打印同样的数据
在这里插入图片描述
打印结果如下:

scenePos = QPointF(216,180) rect = QRectF(-212,-176 212x176) centerPos = QPointF(-106,-88)

2.分析数据

不知道大家有没有看出,绘制两个矩形,长宽可能有点差异,但是起点位置应该是差不多的,但是一个打印出来是(1,3),另一个打印出来是QPointF(216,180),我这边是设置场景坐标为左上角为起始QPointF(0,0);
这就要和中心点的坐标有关系了,前面我讲过,你把图元当成一个点,你只看他的中心点就可以了;

先看上图1,矩形图元的中心点坐标是QPointF(144,93),所在场景中的坐标是QPointF(1,3);这样我们看不太理解,那么进行转换一下,将图1矩形图元的中心原点改为QPointF(0,0),所在场景的坐标则就变成了QPointF(1,3)+QPointF(144,93);转换代码如下(示例),实际上图元在场景并没有移动变化

RectItem* pRect = qgraphicsitem_cast<RectItem*>(items.first());
if(pRect != nullptr)
{
    QPointF pos = pRect->pos();
    QRectF rect = pRect->getRect();
        
    qDebug() << "scenePos =" << pRect->pos() << "rect ="<< rect << "centerPos ="<< rect.center();
        
    QRectF newRect = QRectF(-rect.width() / 2, -rect.height() / 2, rect.width(), rect.height());
    QPointF newPos = pos + rect.center();
        
    pRect->setPos(newPos);
    pRect->setRect(newRect);
        
    qDebug() << "scenePos =" << pRect->pos() << "rect ="<< pRect->getRect() << "centerPos ="<< pRect->getRect().center();
}

同样,上图2绘制的矩形调用该段代码,图元也在场景中并没有移动变化;这样每个图元的中心原点是QPointF(0,0),那么在场景中的坐标就很明显了;

转换后两个图元的中心原点都为QPointF(0,0),图1矩形图元所在场景的坐标变为QPointF(145,96);图2矩形图元所在场景的坐标变为QPointF(110,92),都是图元的中心点QPointF(0,0)相对于场景原点QPointF(0,0)的偏移,你把图元就看成一个中心原点,先不考虑它的长宽,这样理解起来就清晰多了;


总结

该章主要是讲解了一下我对图元和场景之间坐标系统的理解,有不足的地方欢迎大家评论区指出,下一章将讲解图元组(选择多个图元)

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-09-04 01:23:01  更:2022-09-04 01:27:18 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 4:39:32-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码