QML学习笔记——自定义Rectangle控件之动态缩放

最新推荐文章于 2024-04-26 08:55:11 发布
最新推荐文章于 2024-04-26 08:55:11 发布
阅读量3.5k 收藏 22
点赞数 7
分类专栏： QML 文章标签： QML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22049783/article/details/81327513
版权

写在前面

  • 之前需要用到一个可以动态拖拽、放大缩小的控件，在网上没找到合适的“轮子”（o(╯□╰)o），于是自己动手造了一个^_^ 。

Rectangle

环境

  • Qt 5.9.3 + MinGW
  • window 10

设计思路

  • 思路比较简单，就是仿照window窗口的拖拉，将Rectangle分成九宫格，如下图：
    这里写图片描述
    分别为：

    LeftTop
    Top
    RightTop
    Left
    Center
    Right
    LeftBottom
    Bottom
    RightBottom

  • 用MouseArea获取鼠标事件，计算坐标，判断其在哪个区域，并处理。

上代码

  • step表示四周判断距离，可以自行调整，（PS：矩形4个角的方块的宽度）
> 四个角落的小方块，是我为了体现出判断区域的大小用 `Canvas` 画上去的。
    Canvas{
            id:can2d;
            contextType: "2d";
            anchors.fill: parent;

            onPaint: {
                context.fillStyle = "blue";
                context.fillRect(0,0,step,step);
                context.fillRect(0,block.height-step,step,step);
                context.fillRect(block.width-step,0,step,step);
                context.fillRect(block.width-step,block.height-step,step,step);
            }
    }
  • mouseState的值为0~9，代表鼠标在MouseArea中的状态，分别为
mouseStateArea
0丢失焦点
1LeftTop
2Left
3LeftBottom
4Top
5Center
6Bottom
7RightTop
8Left
9RightBottom
  • 关键代码MouseArea
    hoverEnabled: block.focus;：只有在有焦点的时候才响应鼠标移动事件。
    mouseOld：在鼠标按下时记录的起始坐标。
    mouseNew：鼠标移动时的当前坐标。
    isclicked：鼠标是否按下。（PS：block在有焦点且在鼠标按下的情况下，进行拖拽等事件；在有焦点，鼠标没有按下时仅改变鼠标形状。）
    cursorShape：设置鼠标形状
    MouseArea {
        id:mouse_area;
        hoverEnabled: block.focus;
        anchors.fill: block;

        onPressed:{
            block.focus=true;
            block.isclicked=true;
            mouseOld=parent.mapToItem(parent.parent,mouseX,mouseY);

            mouse.accepted=true;
        }
        onReleased:{
            block.isclicked=false;
            mouse.accepted=true;
        }
        onPositionChanged: {
            if(block.isclicked)
            {
                mouseNew=parent.mapToItem(parent.parent,mouseX,mouseY);

                switch(mouseState)
                {
                case 0:
                case 5:
                    block.x=block.x+mouseNew.x-mouseOld.x;
                    block.y=block.y+mouseNew.y-mouseOld.y;
                    break;

                case 1:
                ...
                case 2:
                case 3:
                case 4:
                case 6:
                case 7:
                case 8:
                case 9:
                default:
                }

                //这里的两个if是限制block的最小尺寸，防止缩小到看不见。
                if(block.width<=25)
                    block.width=25;

                if(block.height<=25)
                    block.height=25;

                mouseOld=mouseNew;
            }
            else{
                if(mouseX<block.step&&mouseX>=0)
                {
                    if(0<=mouseY&&mouseY<block.step){
                        mouseState=1;
                        mouse_area.cursorShape= Qt.SizeFDiagCursor;
                    }
                    else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                        mouseState=3;
                        mouse_area.cursorShape= Qt.SizeBDiagCursor;
                    }
                    else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                        mouseState=2;
                        mouse_area.cursorShape= Qt.SizeHorCursor;
                    }
                }
                else if(block.width-block.step<mouseX&&mouseX<=block.width)
                {
                    if(0<=mouseY&&mouseY<block.step){
                        mouseState=7;
                        mouse_area.cursorShape= Qt.SizeBDiagCursor;
                    }
                    else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                        mouseState=9;
                        mouse_area.cursorShape= Qt.SizeFDiagCursor;
                    }
                    else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                        mouseState=8;
                        mouse_area.cursorShape= Qt.SizeHorCursor;
                    }
                }
                else if(block.width-block.step>=mouseX&&mouseX>=block.step)
                {
                    if(0<=mouseY&&mouseY<block.step){
                        mouseState=4;
                        mouse_area.cursorShape= Qt.SizeVerCursor;
                    }
                    else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                        mouseState=6;
                        mouse_area.cursorShape= Qt.SizeVerCursor;
                    }
                    else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                        mouseState=5;
                        mouse_area.cursorShape=Qt.ArrowCursor;
                    }
                }
            }
            mouse.accepted=true;
        }
    }
  • 完整代码
import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    id:block;
    width: 170;
    height: 100;

    property int step: 10;   //鼠标的检测区域尺寸
    property var mouseOld;   //鼠标按下时的坐标
    property var mouseNew;   //鼠标移动时的坐标

    //是否点击
    property bool isclicked: false;
    //鼠标状态
    property int mouseState: 0;

    border.width: 2;
    border.color:"blue";
    color: block.focus ? "green" : "blue"

    //绘制4个角
    Canvas{
            id:can2d;
            contextType: "2d";
            anchors.fill: parent;

            onPaint: {
                context.fillStyle = "blue";
                context.fillRect(0,0,step,step);
                context.fillRect(0,block.height-step,step,step);
                context.fillRect(block.width-step,0,step,step);
                context.fillRect(block.width-step,block.height-step,step,step);
            }
    }

    MouseArea {
        id:mouse_area;
        hoverEnabled: block.focus;
        anchors.fill: block;

        onPressed:{
            block.focus=true;
            block.isclicked=true;
            mouseOld=parent.mapToItem(parent.parent,mouseX,mouseY);

            mouse.accepted=true;
        }
        onReleased:{
            block.isclicked=false;
            mouse.accepted=true;
        }
        onPositionChanged: {
            if(block.isclicked)
            {
                mouseNew=parent.mapToItem(parent.parent,mouseX,mouseY);

                switch(mouseState) //判断鼠标当前状态，0代表，在无焦点的情况下，直接点击就可以拖动。
                {
                case 0:
                case 5:
                    block.x=block.x+mouseNew.x-mouseOld.x;
                    block.y=block.y+mouseNew.y-mouseOld.y;
                    break;

                case 1:
                    block.width=block.width-mouseNew.x+mouseOld.x;
                    block.height=block.height-mouseNew.y+mouseOld.y;
                    if(block.width>25)
                    block.x=block.x+mouseNew.x-mouseOld.x;
                    if(block.height>25)
                    block.y=block.y+mouseNew.y-mouseOld.y;
                    break;

                case 2:
                    block.width=block.width-mouseNew.x+mouseOld.x;
                    if(block.width>25)
                    block.x=block.x+mouseNew.x-mouseOld.x;
                    break;

                case 3:
                    block.width=block.width-mouseNew.x+mouseOld.x;
                    block.height=block.height+mouseNew.y-mouseOld.y;
                    if(block.width>25)
                    block.x=block.x+mouseNew.x-mouseOld.x;
                    break;

                case 4:
                    block.height=block.height-mouseNew.y+mouseOld.y;
                    if(block.height>25)
                    block.y=block.y+mouseNew.y-mouseOld.y;
                    break;

                case 6:
                    block.height=block.height+mouseNew.y-mouseOld.y;
                    break;

                case 7:
                    block.height=block.height-mouseNew.y+mouseOld.y;
                    block.width=block.width+mouseNew.x-mouseOld.x;
                    if(block.height>25)
                    block.y=block.y+mouseNew.y-mouseOld.y;
                    break;

                case 8:
                    block.width=block.width+mouseNew.x-mouseOld.x;
                    break;

                case 9:
                    block.width=block.width+mouseNew.x-mouseOld.x;
                    block.height=block.height+mouseNew.y-mouseOld.y;
                    break;
                default:

                }
                //这里的两个if是限制block的最小尺寸，防止缩小到看不见。
                if(block.width<=25)
                    block.width=25;

                if(block.height<=25)
                    block.height=25;

                mouseOld=mouseNew;
            }
            else
            {
                if(mouseX<block.step&&mouseX>=0)
                {
                    if(0<=mouseY&&mouseY<block.step){
                        mouseState=1;
                        mouse_area.cursorShape= Qt.SizeFDiagCursor;
                    }
                    else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                        mouseState=3;
                        mouse_area.cursorShape= Qt.SizeBDiagCursor;
                    }
                    else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                        mouseState=2;
                        mouse_area.cursorShape= Qt.SizeHorCursor;
                    }
                }
                else if(block.width-block.step<mouseX&&mouseX<=block.width)
                {
                    if(0<=mouseY&&mouseY<block.step){
                        mouseState=7;
                        mouse_area.cursorShape= Qt.SizeBDiagCursor;
                    }
                    else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                        mouseState=9;
                        mouse_area.cursorShape= Qt.SizeFDiagCursor;
                    }
                    else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                        mouseState=8;
                        mouse_area.cursorShape= Qt.SizeHorCursor;
                    }
                }
                else if(block.width-block.step>=mouseX&&mouseX>=block.step)
                {
                    if(0<=mouseY&&mouseY<block.step){
                        mouseState=4;
                        mouse_area.cursorShape= Qt.SizeVerCursor;
                    }
                    else if((block.height-block.step)<mouseY&&mouseY<=block.height){
                        mouseState=6;
                        mouse_area.cursorShape= Qt.SizeVerCursor;
                    }
                    else if(block.step<=mouseY&&mouseY<=block.height-block.step){
                        mouseState=5;
                        mouse_area.cursorShape=Qt.ArrowCursor;
                    }
                }
            }
            mouse.accepted=true;
        }
    }

//失去焦点时改变鼠标形状，且将鼠标状态重置为0，（不然在使用中达不到理想效果）
    onFocusChanged: {
        if(!block.focus)
        {
            mouse_area.cursorShape=Qt.ArrowCursor;
            mouseState=0;
        }
    }
}

小结

  • mapToItem 保存的坐标是相对于block的parent的相对坐标。

    object mapToItem(Item item, real x, real y)
    将调用该方法的对象(C)的坐标点(x,y)，映射到参数item(D)的坐标系统中，并返回一个映射之后的坐标(point)。此时，参数x，y是指的C对象上的坐标点。如果item参数是null值，坐标点的值就是从QML视图的根元素的坐标系统映射出来的。

    具体可看该博客：https://blog.csdn.net/imtina/article/details/53670528

  • 这只是个基础的代码，可以在这个的基础上修改或者增加内容来满足实际需要。

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

我一板砖下去
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt：让QML中的控件自动缩放
Jason’s home
05-18 1万+
为了让QML开发的程序适应更多的设备，我们可能需要去缩放Item，但是手动缩放开发太耗时还容易出错，所以我封装了一下 效果是根据开发时的x、y、width、height自动缩放的扩展
QML之FocusScope的理解与使用
lw的博客
06-19 1900
注意FocusScope需要主动传入焦点以及注意焦点拦截及没有接收焦点等情况。友情提示——哪里看不懂可私哦，让我们一起互相进步吧注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。注：如有侵权，请联系作者删除。
QML实现 无边框 可移动 可缩放窗体
最新发布
qthello
04-26 348
利用QML实现无边框窗体，要求可移动，可缩放。
QT QML控件自动缩放
断点
11-29 774
前言： 转载请附上连接,本帖原创请勿照抄。 效果图： QML部分： main.qml import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 Window { visible: true width: 640 height: 480 title: qsTr("AutoResize") id:window //变量的定义 propert.
QML对元素进行移动、旋转、缩放
世界需要程序员，而我就是其中一员！
04-08 996
本篇博客主要示范QML中对元素的移动、缩放、旋转！
【QML 动态对象】使用JS中的语句动态创建和销毁组件
m0_60259116的博客
03-02 1069
【QML 动态对象】使用JS中的语句动态创建和销毁组件
QML-状态转换时加入渐变动画
mrbone11的博客
02-14 545
import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle { anchors.centerIn: parent width: 75; height: 75 id: button state: "NORMAL" Text{ text: "butt
一套完整的强大的qml自定义控件
04-20
一套完整的自定义的qmlGUI控件，功能强大完全可以拿去开发项目而不用重复造轮子。包括Button，Calendar，CheckBox，ComboBox，CtrlDialog，DateEdit，DatePicker，Dialog，FileDialog，ImageButton，Label，LineEdit...
QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)
12-03
本教程主要探讨了如何使用QML中的Dial控件及其相关的DialStyle来构建自定义仪表盘。Dial控件通常用于表示数值或者进行旋转选择，比如在音频播放器中调整音量或在烹饪应用中设置温度。 Dial是Qt Quick Controls模块...
QML自定义控件----自定义菜单
08-31
只用传入jason就能使用的qml自定义菜单，为了更方便的调用下级节点，第一级菜单使用的是Repeater，第二级使用的是listview，通过它们自身的动态创建，来实现多级菜单，而为了更方便的使用，菜单的model使用Jason来...
Qml之自编表格控件（动态）
12-24
笔者在使用qt的qml语言开发产品时候，经常需要用到一些表格类的控件，...这一表格控件采用最基本qml元素编写，兼容性非常好，该表格控件还支持qt接口调用，动态显示。在文章的最后会公开源代码，仅供读者们参考学习。
QML ComboBox自定义控件
11-19
本篇文章将深入探讨如何在QML中自定义ComboBox控件，以解决按键上下操作的问题。 首先，理解ComboBox的基本结构至关重要。ComboBox主要由两部分组成：一个可编辑的文本输入（通常称为Delegate）和一个下拉菜单，...
QML中Rectangle QML的透明度、旋转、缩放、渐变及Animation and Transitions
快乐学习，快乐分享
02-20 7381
子模型也是QML的特点之一。这里最值得一提的还是Rectangle这个item，因为他的用处很广泛。他可以用来对某个区域进行操作和绘制。比如你要在特定的地方指定接收鼠标单击事件，或者某个地方显示特定的颜色。简单看一看Rectangle的一些属性。[cpp] view plain copy 在CODE上查看代码片派生到我的代码片import QtQuick 2.3 import QtQuick.
QML 可拖拽边框和顶点调整大小组件（新增对主窗口支持）
zjgo007的专栏
03-14 4623
QML项目开发过程中，有时候需要对控件大小和位置‘进行人为调整，因此设计该组件。该组件鼠标置于边框和顶点位置时鼠标样式对应改变，拖动边框可修改该方向组件大小，拖动顶点可修改组件处横纵向组件大小。同时新增了对主窗体的拖拽支持。
71.qt quick-可伸展菜单-抽屉栏示例 通用QML界面(一键换肤)
抵抗时间扭曲，坚持做一件有意义的事
12-10 4027
特点: 支持动态添加item、删除item、自适应界面 附带添加删除、展开等动画 同时支持qwidget、qml加载 支持number提示(比如消息数量等) 侧边抽屉栏支持动画伸展 支持换肤、拖拽、最大化等
【零基础学QT】【046】Qml布局
天天向上 Up Up Up (*^▽^*)
02-03 1159
基本布局 绝对定位：通过x，y属性来确定位置 相对定位：通过anchors来确定相对于其它控件的位置 定位器（Positioner） 定位器可以让若干Item按照一定规则来摆放，如横向排列，竖向排列，网格状排列，流式排列 布局管理器（LayoutManager） 布局管理器是从Qt5开始引入的功能，它的功能比定位器更强大，适合比较复杂的情景 传统的定位器，当窗口或控件发生变化时，控件大小并不能自动适应窗口变化，而布局管理器则可以实现自适应
Qt 之 Qml组件与对象动态创建详解(转)
一个老菜鸟的学习分享
04-11 2520
版权所有 foruok ，转载请注明出处：http://blog.csdn.net/foruok 。 Components（组件） Component 是由 Qt 框架或开发者封装好的、只暴露了必要接口的 QML 类型，可以重复利用。一个 QML 组件就像一个黑盒子，它通过属性、信号、函数和外部世界交互。 一个 Component 即可以定义在独立的 qml 文件中，也可以嵌入到其它的 qml 文档中来定义。通常我们可以根据这个原则来选择将一个 Component 定义在哪里：如果一...
关于QML动态加载组件的两种方式及区别
FirstBloodwlb的博客
02-26 1686
为什么需要动态加载组件? 1.在不确定加载视图A或视图B时,可以延时创建组件以达到自己想要的效果。 2.组件模块化,保证程序的阅读质量以及封装性的提高。 3.组件在不加载时,不占用内存。 文件内加载组件方式 import QtQuick 2.9 import QtQuick.Controls 2.2 ApplicationWindow { id: windowview visi...
75.qt qml-通用QML界面V2-剪映暗黑风格界面
抵抗时间扭曲，坚持做一件有意义的事
03-13 1444
如下图所示: 我们在上个文章 71.qt quick-可伸展菜单-抽屉栏示例 通用QML界面(一键换肤)_qml换肤_诺谦的博客-CSDN博客基础上 新增了一个暗黑风格界面其中侧边栏是LeftSidebar.qml, 需要注意的是该侧边栏也可以设置右侧的哦.设置后如下所示: 其中侧边栏代码如下所示: 然后侧边栏里的内容则是StretchEntry.qml伸展容器了,代码过多就不描述了后面会发第三最终版本、该demo已上传至专栏群(1.qml-创建第一个程序_诺谦的博客-CSDN博客) 文章底部获取源码
qml 动态添加多个自定义控件
10-04
在QML中，你可以使用动态创建组件的方法来添加多个自定义控件。你可以使用Qt.createComponent()函数来动态创建组件实例，并使用createObject()函数来创建组件的多个实例。以下是一个示例代码： ``` import QtQuick 2.0 Rectangle { id: container width: 200 height: 200 function createCustomButton() { var component = Qt.createComponent("CustomButton.qml"); if (component.status === Component.Ready) { var button = component.createObject(container); button.x = Math.random() * (container.width - button.width); button.y = Math.random() * (container.height - button.height); } else { console.log("Error creating component:", component.errorString()); } } MouseArea { anchors.fill: parent onClicked: { createCustomButton(); } } } ``` 这个示例中，我们创建了一个名为container的矩形容器，它用于放置自定义按钮。当鼠标点击容器时，会调用createCustomButton()函数来创建一个自定义按钮的实例，并将其放置在容器内的随机位置。你可以根据需要设置按钮的属性和行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值