QML 3D 操作鼠标选择对象、界面拖拽与缩放

使用工具: qt Design Studio

请添加图片描述
使用3d功能必不可少的就是让模型与鼠标进行交互。
创建新的3d项目后添加MouseArea鼠标区域

在这里插入图片描述

旋转
旋转思想是工件不动,令相机绕工件旋转,镜头拉近即为放大,远离为缩小。
选择利用的是零件的pickable属性,pickable为true时可被选中。但是在点击的时候是不会自动切换颜色的,需要其他操作。

在这里插入图片描述
工件的代码


用isPicked表示是否选中,和渲染颜色

Model {
   
      id: cylinder
       source: "#Cylinder"
       scale.z: 0.1
       scale.y: 1.1
       scale.x: 0.1
       objectName: "Cube"
       pickable: true     //可选
       property bool isPicked: false  //记录是否选中该零件

	materials: DefaultMaterial {
     //渲染
	//如果选中就换个颜色
         diffuseColor: cylinder.isPicked ? "#17a81a" : "#9d9faa" 
         
         specularAmount: 0.25
         specularRoughness: 0.2
}
}

MouseArea 的代码

MouseArea {
   
            id:sss
            x: 0
            y: 0
            anchors.fill:view3D
            Connections {
   
                target: sss
                property int cx: 0  //缓存一下鼠标位置
                property int cy: 0
                property string nametext:"sss"//记录选择物体的名称
                onWheel: {
   //放缩--调整摄像头的远近
                    if (wheel.angleDelta.y > 0)
                        
                        "摄影机id".z = "摄影机id".z + 5
                    else
                        "摄影机id".z = "摄影机id".z - 5
                }
                onPressed: {
     //获取按下的坐标
                    cx = mouse.x
                    cy = mouse.y
                }

                onPositionChanged: {
   //位移--坐标这样操作是因为对应的坐标轴方向不同
                    var intervalX = mouse.x - cx
                    var intervalY = mouse.y - cy
                    "相机节点".eulerRotation.y = "相机节点".eulerRotation.y - intervalX
                    "相机节点".eulerRotation.x = "相机节点".eulerRotation.x - intervalY
                    cx = mouse.x
                    cy = mouse.y
                }
                onClicked: {
     //点击屏幕,映射到工件上,
                    // 获取屏幕点击坐标
                    name.text = "位置: (" + mouse.x + ", " + mouse.y + ")"
                    var result = view3D.pick(mouse.x, mouse.y);//映射
                   if (result
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QtQML中,可以通过鼠标移动来实现缩放item的效果。首先,在QML文件中创建一个可视化元素,用来表示需要进行缩放的item,可以是一个Rectangle、Image或其他可视化元素。然后,可以通过MouseArea元素捕获鼠标的移动事件。 首先,需要设置鼠标移动事件的处理函数。在MouseArea元素中,可以通过onPositionChanged属性来设置当鼠标位置发生变化时的处理函数。在处理函数中,可以获取鼠标的移动距离,并根据移动距离来动态改变item的大小。 具体地,可以使用一个变量来记录鼠标上一次的位置。当鼠标位置变化时,可以计算鼠标相对于上一次位置的移动距离,并将其累加到item的宽度和高度上。这样,随着鼠标的移动,item的大小会不断改变。 下面是一个简单的例子,展示了如何实现鼠标移动缩放item的效果: ''' import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { width: 400 height: 400 Rectangle { id: item width: 100 height: 100 color: "red" } MouseArea { id: mouseArea anchors.fill: parent property int lastMouseX: 0 property int lastMouseY: 0 onPositionChanged: { var deltaX = mouse.x - lastMouseX var deltaY = mouse.y - lastMouseY item.width += deltaX item.height += deltaY lastMouseX = mouse.x lastMouseY = mouse.y } onPressed: { lastMouseX = mouse.x lastMouseY = mouse.y } } } ''' 在上述的例子中,绑定了一个MouseArea到父级Rectangle上,并监听了其onPositionChanged和onPressed事件。在onPositionChanged事件处理函数中,分别计算鼠标位置的变化,并将其累加到item的宽度和高度上,实现了鼠标移动缩放item的效果。 希望这个回答对您有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值