简单实现FishEye鱼眼效果



  • 记得FishEye鱼眼效果是好久之前学C#一个前辈给我的一个东西。他长这样:

    0_1455805609183_1.png

    经过他时:

    1_1455805609184_2.png

    这是楼主做的:

    2_1455805609184_3.png

    经过控件时:

    3_1455805609184_4.png

    (可惜qtdream不能发动态图)

    接下来我们说一下实现原理:

    可以看到楼主有一个矩形框住了这些控件,这些矩形就是FishEyePanel(鱼眼面板)

    0_1455806022873_5.png

    楼主的思路是:

    在FishEyePanel中,铺上一个MouseArea,设置这个MouseArea的hoverdEnabled为true,这样就能实现“悬浮”效果了。

    然后呢,设定一个全局的int变量,用来储存MouseArea的onPositionChanged信号中的mouse.x,为子项创建一个GlobalMouseX,用来判断鼠标移动时候x坐标数值

    0_1455806254630_6.png

    然后呢我们为子项建立一些变量,例如:

    0_1455806451523_7.png

    建立一个Image,显示图标

    0_1455806570567_8.png

    然后,我们进入核心部分,就是使控件发生形变的部分:

    0_1455806623950_9.png

    我们一行一行解读代码:

        if(globalMouseX == -1)
            anim.start()
    

    这段代码是检查鼠标是否不停留在FishEyePanel上了,不停的话就执行恢复尺寸的动画

    否则,就计算鼠标停留位置的x坐标与控件的中心横坐标的距离:

                  var distance = Math.abs(globalMouseX - widthCenter)
    

    判断这个距离是否在形变范围内:

                   if(distance < scaleMouseX)
    

    首先我们确认一件事:distance如果变大,那么控件的尺寸就变小;distance变小,那么控件的尺寸就变大。

    于是我们就用scaleMouseX-distance获得距离的另一部分,占总scaleMouseX的百分数,然后乘以控件的变化范围(maxSize - normalSize),再加上没变化时的尺寸。就得到新的尺寸

      changeSize = (scaleMouseX-distance) / scaleMouseX * (maxSize - normalSize) + normalSize
    

    changeSize就是我们的新尺寸,于是我们可以通过短动画来实现这个的过渡:

     animchange.start()
    

    接着我们也可以判断,如果尺寸比正常尺寸小,那么就强制恢复正常尺寸:

     if(rect.width <= normalSize)
                rect.width = normalSize
    

    整个代码:

       import QtQuick 2.4
       Rectangle{
    
    id:rect
    width: 80
    height: rect.width
    property int scaleMouseX: 200//靠近控件scaleMouseX时能使控件发生形变
    property int maxSize: 120//形变最大值
    property int normalSize: 80//普通时候的尺寸
    property int globalMouseX: 0//储存FishEyePanel的panelMouseX
    property int widthCenter: rect.x + rect.width / 2//控件的中心横坐标
    property url imgSource: "value"
    property int changeSize: 0
    color: "#00000000"
    Component.onCompleted: console.log(rect.x)
    antialiasing: true
    Image{
        id: img
        width: rect.width - 10
        height: rect.height - 10
        source: imgSource
        anchors.centerIn: parent
        antialiasing: true
    }
    
    NumberAnimation {
        id: anim
        target: rect
        property: "width"
        duration: 100
        to: normalSize
        easing.type: Easing.OutSine
    }
    
    NumberAnimation {
        id:animchange
        target: rect
        property: "width"
        duration: 30
        to: changeSize
        easing.type: Easing.Linear
    }
    onGlobalMouseXChanged: {
        if(globalMouseX == -1)
            anim.start()
        else{
            var distance = Math.abs(globalMouseX - widthCenter)
            if(distance < scaleMouseX)
            {
                changeSize = (scaleMouseX-distance) / scaleMouseX * (maxSize - normalSize) + normalSize
                animchange.start()
            }
            if(rect.width <= normalSize)
                rect.width = normalSize
        }
    }
    

    }

    main.qml:

      import QtQuick 2.3
      import QtQuick.Window 2.2
      import QtQuick.Layouts 1.1
    
      Window {
      visible: true
      width: 800
      height: 600
      color: "silver"
      property int panelMouseX: 0
        Rectangle{
            width: 600
            height: 200
            color: "#00000000"
            anchors.centerIn: parent
            border.width: 2
            border.color: "grey"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onPositionChanged: panelMouseX = mouse.x
                onExited: panelMouseX = -1
                z: 1
        }
        FishImg{
            id:fishImg1
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 50
            imgSource: "qrc:/images/calc.png"
            globalMouseX: panelMouseX
        }
        FishImg{
            id:fishImg2
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: fishImg1.right
            imgSource: "qrc:/images/calc.png"
            globalMouseX: panelMouseX
        }
        FishImg{
            id:fishImg3
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: fishImg2.right
            imgSource: "qrc:/images/calc.png"
            globalMouseX: panelMouseX
        }
        FishImg{
            id:fishImg4
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: fishImg3.right
            imgSource: "qrc:/images/calc.png"
            globalMouseX: panelMouseX
        }
        FishImg{
            id:fishImg5
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: fishImg4.right
            imgSource: "qrc:/images/calc.png"
            globalMouseX: panelMouseX
        }
    }
    

    }

    欢迎大家回复,可能我解释的不是很好。😄



  • @加速cccc Give you a support! And I'll look into the solution for not showing gif images.



  • @jiangcaiyang ok,i am looking forward to it



  • 看看手机能不能回复



  • @qyvlik 手机是可以回复的,一点儿问题都没有。


Log in to reply
 

走马观花

最近的回复

  • C

    Qt for MCU需要商业授权的

    read more
  • Qt for MCUs

    搭建Qt for MCUs PC端开发环境。qt for mcus提供了一个完整的图形框架和工具包,包含了在MCUs上设计、开发和部署gui所需的一切。它允许您在裸机或实时操作系统上运行应用程序。

    先决条件

    开发主机环境支持仅限于Windows 10

    MSVC compiler v19.16 (Visual Studio 2017 15.9.9 or newer) x64

    CMake v3.13 or newer (you can install it using the Qt Online installer) x64

    使用Qt联机安装程序安装Qt for MCUs,该安装程序可通过Qt帐户下载

    安装Qt 5.14和Qt Creator 4.11 or higher

    安装链接

    › Qt: https://account.qt.io/downloads
    › CMake: https://cmake.org/download/
    › Python 2.7 32-bit: https://www.python.org/downloads/release/python-2716/
    › Arm GCC: https://developer.arm.com/tools-and-software/open-source-software/developer-tools/gnutoolchain/gnu-rm/downloads
    › J-Link Software Pack: https://www.segger.com/downloads/jlink/JLink_Windows.exe
    › J-Link OpenSDA Firmware: https://www.segger.com/downloads/jlink/OpenSDA_MIMXRT1050-EVKHyperflash
    › STM32CubeProgrammer: https://www.st.com/en/development-tools/stm32cubeprog.html
    › STM32 ST-LINK Utility: https://www.st.com/en/development-tools/stsw-link004.html​​​​​​​

    Qt Creator设置 启用Qt Creator插件 选择“帮助>关于插件”,然后从列表中选择“MCU支持(实验性)”插件,重新启动Qt Creator以应用更改
    替代文字 为MCU创建Qt工具包

    选择工具>选项>设备>MCU

    选择Qt for MCUs-Desktop 32bpp作为目标

    如果尚未设置,请提供Qt for MCUs安装目录的路径。

    单击Apply应用。

    替代文字

    替代文字
    替代文字

    注意:

    编译器要选X64,Qt版本要选64bit,CMake Tool选x64

    打开恒温器项目demo

    选择文件>打开文件或项目。。。

    打开CMakefiles.txt文件来自thermo文件夹的文件。

    选择Qt作为MCU-桌面32bpp套件。

    单击“配置项目”以完成。

    替代文字

    问题

    开发主机环境支持仅限于Windows 10

    C++编译失败,文本大字体.pixelSize.

    文本类型无法正确呈现需要复杂文本布局的unicode序列。对复杂文本使用StaticText

    read more
  • H

    hi 有问题请教你,方便加个联系方式吗

    read more
  • boost.asio是一个很棒的网络库,这回儿我也开始系统地学习起来了。想想当年接触boost,也有八年多了。这次开始接触boost,觉得既熟悉又陌生。熟悉的是小写字母+下划线的命名方式、晦涩的模板、很慢的编译速度以及较大的程序体积,陌生的是asio的各种概念:io服务、接收器、套接字等等:我之前对网络编程不是非常了解。

    于是根据我的理解,参考《Boost.Asio C++网络编程》实现了这样一个简单的客户端和服务端通信的例子,例子非常简单,还不完善,但是幸运的是,可以在本机上互通了。
    下面是客户端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void writeHandler( const boost::system::error_code& ec, size_t bytesTransferred ) { if ( ec ) { cout << "Write data error, code: " << ec.value( ) << "transferred: " << bytesTransferred << endl; } else { cout << "OK! " << bytesTransferred << "bytes written. " << endl; } } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::socket sock( service ); ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; sock.connect( ep, ec ); if ( ec ) { cout << "Connect error, code: " << ec.value( ) << ", We will exit." << endl; return ec.value( ); } else { char buf[1024] = "Hello world!"; sock.async_write_some( buffer( buf ), writeHandler ); sock.close( ); } return service.run( ); }

    下面是服务端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void acceptHandle( const boost::system::error_code& code ) { cout << "Accepted." << endl; } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; ip::tcp::socket sock( service ); ip::tcp::acceptor acceptor( service, ep ); acceptor.async_accept( sock, acceptHandle ); if ( ec ) { cout << "There is an error in server. code: " << ec.value( ) << endl; } return service.run( );// 阻塞运行 }

    运行结果是这样的:
    78448d7b-b3ae-42fc-9e2e-4dd2fbdac2c2-image.png

    我对boost.asio中几个概念的理解:

    io_service,这就是一个类似事件循环的东西,它为io设备提供服务,故名。不管是套接字、文件还是串口设备,都要使用它的服务。它的run()函数相当于启动了一个事件循环。一旦有消息了,即进行响应。这也是实现异步编程的重要基础。 socket,这个类则是套接字,可以处理TCP或者是UDP请求。有同步以及异步的处理方式,也有带异常以及不带异常的处理方式。 acceptor,接收器,仅仅是服务端使用。相当于其余框架中的listener,作接收用的。

    比较浅显,如果有不当之处,敬请指正。

    read more

关注我们

微博
QQ群