FishEye(二) 之填坑:在不使用布局的情况下,父项调节子项大小



  • (代码还有许许多多可以优化的地方,一步一步来,也欢迎提交bug和建议O(∩_∩)O)

    效果图:

    0_1460209450746_123.png

    很简单,我们在子项添加一个bool,用于了解子项是否被放大:

     property bool isInfuenced: false
    

    然后,在放大代码里,加上放大判断:

      onGlobalMouseXChanged: {
              isInfuenced = false
              if(globalMouseX == -1)
                  anim.start()
              else{
                  var distance = Math.abs(globalMouseX - widthCenter)
                  if(distance < scaleMouseX)
                  {
                      changeSize = (scaleMouseX-distance) / scaleMouseX * (maxSize - 80) + 80
                      animchange.start()
                      //判断是否放大
                      isInfuenced = true
                  }
                  if(rect.width <= 80)
                      rect.width = normalSize
              }
          }
    

    然后在父项建立一个公共所有未被影响的图标的尺寸,判断遍历一下:

        //Rectangle
        property var realSize: 80
    
    
    
    
        MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    onPositionChanged: {
                        var s = 0;
                        var aw = 0;
                        for(var c in rows.children)
                        {
                            if(rows.children[c].isInfuenced)
                            {
                                s++;
                                aw += rows.children[c].width;
                            }
                        }
                        rect.realSize = (rect.width - aw) / (rows.num() - s)
                        console.log(rect.realSize)
                        panelMouseX = mouse.x
                    }
        
                    onExited: {
                        rect.realSize = 80
                        panelMouseX = -1
                    }
                    z: 1
                }
    

    以上代码中,下面这一段是本文的核心代码:

     var s = 0;
                var aw = 0;
                for(var c in rows.children)
                {
                    if(rows.children[c].isInfuenced)
                    {
                        s++;
                        aw += rows.children[c].width;
                    }
                }
                rect.realSize = (rect.width - aw) / (rows.num() - s)
    

    详细说明一下:

    新代码 rows.num() 是获得 Row 中所有子项的总数

    变量 s 和 aw 分别是 被影响Item的总数被影响Item的总width

    很简单,计算 未被影响的Item,就是用 :

    (父项的width - 被影响Item的总width)/ (Row子项总数 - 被影响Item的总数)

    所有代码:

    子项:

      import QtQuick 2.4
      Rectangle{
    
          id:rect
          width: 80
          height: rect.width
          property int scaleMouseX: 120//靠近控件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
      
          property bool isInfuenced: false
          border.color: "black"
          border.width: 1
          color: "#00000000"
          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: {
              isInfuenced = false
              if(globalMouseX == -1)
                  anim.start()
              else{
                  var distance = Math.abs(globalMouseX - widthCenter)
                  if(distance < scaleMouseX)
                  {
                      changeSize = (scaleMouseX-distance) / scaleMouseX * (maxSize - 80) + 80
                      animchange.start()
                      //判断是否放大
                      isInfuenced = true
                  }
                  if(rect.width <= 80)
                      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{
        id: rect
        width: rows.num() * 80
        height: 200
        color: "#00000000"
        anchors.centerIn: parent
        border.width: 2
        border.color: "grey"
        property var realSize: 80
    
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {
                var s = 0;
                var aw = 0;
                for(var c in rows.children)
                {
                    if(rows.children[c].isInfuenced)
                    {
                        s++;
                        aw += rows.children[c].width;
                    }
                }
                rect.realSize = (rect.width - aw) / (rows.num() - s)
                panelMouseX = mouse.x
            }
    
            onExited: {
                rect.realSize = 80
                panelMouseX = -1
            }
            z: 1
        }
        Row{
            id: rows
            anchors.centerIn: parent
            function num(){
                var s = 0;
                for(var c in rows.children)
                    s++;
                return s;
            }
    
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
            FishEyePanel{
                normalSize: rect.realSize
                imgSource: "picture.svg"
                globalMouseX: panelMouseX
            }
        }
    
    
         }
     }
    

    至此

    (ps:qtdream 复制代码的时候还得空格使他变成代码格式,有没有什么好的办法吗?)



  • 看到了,这是一个好的办法,但是我觉得,通过ListView + Delegate或者PathView也可以实现相应的效果的。



  • @jiangcaiyang FishEye 要做到像鱼眼一般的放大范围内的控件,然而,没有被放大的控件处于待放大状态,它的大小受其他被放大控件放大程度的影响。不能超过父项区域,就尽可能缩放自己。😊这是我写这个东西依赖的思维噢。关于你的方法。下一次放假,等我来实现😂😂



  • @Accelerated 比如说,在ABCDE五个Item中,C处于鼠标中心,放大最大,那么B的中心位置和C的中心位置相减的绝对值作为放大的的因子,因为A距离C比B距离C更远,所以A放大的幅度要小很多。

    😂😂不知道有没有理解~



  • @jiangcaiyang 这个我理解,但是鼠标夹在CD之间呢😂😂



  • @Accelerated 按照像素来算就好了,就可以更加平滑了。夹在C、D之间的话,计算鼠标的位置相对于C的中心 以及 D的中心位置相对C的中心,之间有什么差别,使用线性插值的方法处理。



  • @jiangcaiyang 没听说过这种线性插值,( ⊙ o ⊙ ),但你的大概思路我懂了。谢谢~


Log in to reply
 

最近的回复

  • 由于我们在二次开发的过程中,需要采用调试来测试开发的效果,而使用cmake生成的Visual Studio项目,代码都是O2优化的,不太符合我们的需求,而我们必须每次都要载入Visual Studio 2017手动修改代码优化到禁用,这的确有一些麻烦,于是我们需要找一个更加便利的方法达到效果。我在稍微研究了一下之后得到结论:其实很好解决。

    准备环境

    Windows 10
    Visual Studio 2017
    Notepad++

    随便打开一个vcxproj文件,然后按下快捷键:Ctrl + F,转到文件查找一栏。按照下面的要求填写:

    文件类型 *.vcxproj 查找目标 <Optimization>MaxSpeed</Optimization> 替换为 <Optimization>Disabled</Optimization>

    然后点击“在文件中替换”,等待一会儿,就可以看到优化全部去掉了。这样就可以顺利地单步调试而不会出现断点下不了或者是其它问题了。
    替换代码优化

    read more
  • 惊讶图.jpg
    USD是一个正在发展过程中的文件格式,最基础的,能够支持网格、简单的材质、简单的光照。稍微复杂一点,就可能要借助后续的插件支持了。比如说骨骼动画,这个在USD之前的版本都是没有的,后面慢慢地得到了支持。它是通过UsdSkel这个模块支持的。这个算是和USD核心代码平级的,所以算是USD的外围插件。其实看USDSkel的发展,USDSkel其实是打算做一个动画的最小集,即仅仅支持骨骼和约束的功能,后面更加复杂的功能,通过修改UsdSkel的特性来实现。

    USD已经有一套完善的机制可以很方便地添加自定义的类型。这主要通过USD内置的usdGenSchema.py脚本来达到效果。usdGenSchema.py脚本所在的位置是:

    D:\Develop\USD\pxr\usd\lib\usd

    所以要让USD支持约束,可以选择自己通过Schema来规划一下约束这个类型,包括哪些属性。USD的说明符(specifier)包括class、def和over。其中class和C++的类很相似。我们要自己写一个Schema,大致的内容是这样:

    #usda 1.0 ( """ This file constains schema for supporting skeletal animations in USD. """ subLayers = [ @usdGeom/schema.usda@ ] ) over "GLOBAL" ( customData = { string libraryName = "usdRig" string libraryPath = "qtdream/usd/usdRig" } ) { } class Constraint "Constraint" ( inherits = </Imageable> ) { uniform asset target ( doc = """Target represent affectors whom the constraint will affect to.""" ) uniform asset[] targets ( doc = """The parent targets representing this constraint tied to.""" ) uniform float[] weights ( doc = """Optionally, weights can control the percentage the constraint is affected.""" ) uniform vector3f[] targetOffsetTranslates ( doc = """Optionally, we can specify translate offset to precisely adjust.""" ) uniform vector3f[] targetOffsetRotates ( doc = """Optionally, we can specify rotate offset to precisely adjust.""" ) uniform vector3f rotationDecompositionTarget ( doc = """Used in parentConsstraint.""" ) uniform bool useDecompositionTarget ( doc = """Used in parentConstraint.""" ) }

    接着要根据这个schema产生一大堆的代码,于是,编写以下的脚本:

    :: 运行UsdView插件.bat set Path=^ D:\Develop\Python27;^ D:\Develop\Python27\Scripts;^ D:\Develop\USD_Build\lib;^ D:\Develop\USD_Build\bin;^ D:\Develop\USD_Build\third_party\maya\lib;^ D:\Develop\Autodesk\Maya2018\bin;^ %Path% set MAYA_PLUG_IN_PATH=%MAYA_PLUG_IN_PATH%;^ D:\Develop\USD_Build\third_party\maya\plugin set PYTHONPATH=%PYTHONPATH%;^ D:\Develop\USD_Build\lib\python;^ D:\Develop\Autodesk\Maya2018\Python\Lib\site-packages set MAYA_SCRIPT_PATH=%MAYA_SCRIPT_PATH%;^ D:\Develop\USD_Build\third_party\maya\lib\usd\usdMaya\resources;^ D:\Develop\USD_Build\third_party\maya\plugin\pxrUsdPreviewSurface\resources set XBMLANGPATH=%XBMLANGPATH%;^ D:\Develop\USD_Build\third_party\maya\lib\usd\usdMaya\resources :: 需要安装Jinja2,否则会报错 pip install Jinja2 :: 开始定位到D盘目标位置上,然后执行脚本。 pushd D:\Develop\USD\qtdream\usd\lib\usdRig python D:\Develop\USD\pxr\usd\lib\usd\usdGenSchema.py schema.usda . popd

    如果出现了

    Traceback (most recent call last):
    File "D:\Develop\USD\pxr\usd\lib\usd\usdGenSchema.py", line 43, in <module>
    from jinja2 import Environment, FileSystemLoader
    ImportError: No module named jinja2
    错误,那么可能要想办法让python寻找到Jinja2。于是脚本中添加了:

    pip install Jinja2

    最后很高兴,顺利地生成了想要的C++文件,和产生的Schema文件。

    read more
  • USDView推出了插件的框架,可以顺利地编写Python脚本,作为插件让USDView载入。网上有一个高手,他在他的github上发布了自己的USDView插件。这个插件可不简单,他将USDView推出的插件架构活灵活用,并且添加了一些值得赞赏的效果:支持了USDView不曾支持的节点编辑功能。这个插件的名称叫usdNodeGraph。

    他的github地址在这里:

    https://github.com/1xinghuan/usdNodeGraph.git

    下面介绍一下如何使用吧。

    首先当然是把他的库拿下来了。推荐安装git,并且执行git clone放在本地。

    git clone git@github.com:1xinghuan/usdNodeGraph.git

    获取Qt.py库
    Qt.py库是统一Qt的版本用的。大家知道Qt4的时候有PySide,而Qt5有PySide2。我们在使用Python的时候,通常要执行 from PySide2.QtWidgets import QWidget

    等等脚本,而Qt.py将其统一起来了。不用你写PySide还是PySide2了。所以要执行下面的脚本:

    sudo pip install qt.py

    编写脚本支持其载入
    这个脚本和普通载入USDView插件差不多,唯一的不同是需要设置PYTHONPATH。因为它还要引入其它的库。脚本的内容是: #!/bin/sh export LD_LIBRARY_PATH=/usr/local/USD/lib64:$LD_LIBRARY_PATH export PYTHONPATH=$PYTHONPATH:/usr/local/USD/lib/python # 让usdView能够顺利地载入usdNodeGraph的地址 currentDir=$(cd `dirname $0`; pwd) export PXR_PLUGINPATH_NAME=$currentDir/usdNodeGraph/plugin export PYTHONPATH=$PYTHONPATH:/$currentDir/usdNodeGraph/lib/python:$currentDir/usdNodeGraph/plugin /usr/local/USD/bin/usdview $currentDir/model/7_29_1.usda

    保存文件,就可以顺利地执行了。其实还是挺简单的。执行后的效果如下:
    USDView结合usdNodeGraph.gif

    read more
  • 首先这是一个未知的旅程,有安装Maya软件有风险,一是因为它是商业软件,可能会有版权纠纷,二是Maya软件非常大,安装不慎,可能会出现各种奇怪的问题。我也是参考国外一篇文章才敢开始自己的Maya之路。至于遇到的问题,的确非常多,Maya依赖的版本太多,一些版本不一致的问题可能会导致很多诡异的问题,这时找Maya,找Autodesk是无济于事的。

    安装Maya的运行必备项

    tbb:Intel库,支持并行计算用,典型的是paralell_for用法。
    tiff:图像格式支持
    ssl:加密用
    png:图像格式支持
    gcc:编译器套件

    sudo apt-get install -y libtbb-dev libtiff5-dev libssl-dev libpng12-dev libssl1.0.0 gcc libjpeg62

    安装Alien

    因为Maya是rpm包,要转为deb包,就要借助alien了。alien的安装如下:

    sudo apt-get install -y alien elfutils

    安装多媒体库

    Maya的多媒体编辑功能依赖多媒体库,Linux最常见的就是gstreamer了。

    sudo apt-get install -y libaudiofile-dev libgstreamer-plugins-base0.10-0

    安装图形库

    Maya在Linux中,只有OpenGL是支持的(Maya这么古老的软件是不会这么快支持Vulkan的啦),所以也要安装。目前OpenGL的Linux实现是mesa。命令是:

    sudo apt-get install -y libglw1-mesa libglw1-mesa-dev mesa-utils

    这和安装Qt支持的图形库差不多,事实上Maya的GUI也是大部分依赖Qt。

    安装字体库

    Maya是极度依赖字体的,试想一下,在Linux字体那么丑,能看吗?当然不能。所以还是要安装合适的字体才行。命令是:

    sudo apt-get install -y xfonts-100dpi xfonts-75dpi ttf-mscorefonts-installer fonts-liberation

    在配置ttf-mscorefonts的时候,点击Ok和Yes就可以了。

    同时安装其它依赖Maya的包

    其余依赖Maya的包可以通过下面的命令安装。
    csh:c外壳命令行程序
    fam:Linux中计算机文件或者目录改变的观察者。一旦改变了执行通知操作。

    sudo apt-get install -y csh tcsh libfam0 libfam-dev xfstt

    安装xp6包

    cd /tmp
    wget http://launchpadlibrarian.net/183708483/libxp6_1.0.2-2_amd64.deb
    sudo dpkg -i libxp6_1.0.2-2_amd64.deb

    下载Maya2018

    你可以去Maya官网下载Maya2018,它有给出链接,下载应该不会遇到太多问题。
    然后解压Maya2018到合适的位置。
    我这里是:/media/jiangcaiyang/Data/软件安装包/Linux安装包/Maya2018

    安装Maya2018

    现在需要利用alien将所有rpm包转为deb包。

    sudo alien -cv *.rpm

    接着安装deb包

    udo dpkg -i *.deb

    掉包rpm,欺骗Maya并且让安装通过

    因为Maya的Linux安装包是给Redhat或者是CentOS开发的,所以默认rpm作为安装包的程序。对于debian系,它一直不认的,所以在运行带界面的程序的时候,总是出错。于是我们要执行一下欺骗,让rpm一直返回正确,这样才能欺骗Maya的安装包,让其安装通过。

    编写一个简单的C程序:

    echo "int main (void) {return 0;}" > mayainstall.c

    编译C程序

    gcc mayainstall.c

    备份rpm

    sudo mv /usr/bin/rpm /usr/bin/rpm_backup

    替换掉rpm

    sudo cp -v a.out /usr/bin/rpm

    对一些库位置建立软连接,让Maya识别到

    因为Maya的安装程序在Redhat或者是CentOS测试成功,而在Debian系不成功,对于处于Debian系的Deepin来说,还是挺麻烦的呢。因此还是要重新建立链接才行。

    sudo ln -s /usr/lib/x86_64-linux-gnu/libtbb.so /usr/lib/x86_64-linux-gnu/libtbb_preview.so.2
    sudo ln -s /usr/lib/x86_64-linux-gnu/libtiff.so /usr/lib/libtiff.so.3
    sudo ln -s /usr/lib/x86_64-linux-gnu/libssl.so /usr/autodesk/maya2018/lib/libssl.so.10
    sudo ln -s /usr/lib/x86_64-linux-gnu/libcrypto.so /usr/autodesk/maya2018/lib/libcrypto.so.10

    启动Maya 2018的安装包并且进行安装

    Maya 2018的安装包名称是setup,需要为此添加可执行的权限,因此要执行以下的命令:

    chmod +x setup
    然后执行之
    sudo ./setup
    之后就出现了Maya安装的界面了。久违了哈。
    Maya安装界面

    选择单机版,并且全部输入1。
    Maya安装全部输入1

    下个界面选择【继续】,然后就顺利地完成啦。点击【完成】
    Maya安装完成
    还没有完呢,还需要继续进行下一步的操作才行。

    对已经安装的Maya执行额外的操作

    首先是创建目录。

    sudo mkdir -p /usr/tmp
    给新建立的目录满权限
    sudo chmod 777 /usr/tmp

    为Maya创建一些配置目录。

    mkdir -p ~/maya/2018 ~/maya/2018/syncColor/Shared

    添加一句配置,解决Maya段错误

    echo "MAYA_DISABLE_CIP=1" >> ~/maya/2018/Maya.en

    运行命令解决颜色管理错误

    echo "LC_ALL=C" >> ~/maya/2018/Maya.env

    执行命令,递归地强制让~/maya给满权限。

    chmod -Rfv 777 ~/maya

    恢复扫尾工作

    还记得我们将rpm掉包了吗?现在恢复回来。

    sudo rm -v /usr/bin/rpm
    sudo mv -v /usr/bin/rpm_backup /usr/bin/rpm

    替换正版的Maya2018(选用)

    因为我们安装Maya2018的时候,序列号和产品密钥都是随便填写的1,但是如果是换用正版的Maya2018,我们需要将序列号填写为666-69696969,密钥填写为657J1,并且我们需要用正版的库替换掉我们自己安装的库。因此要执行下面的操作:

    sudo mv /usr/autodesk/maya2018/lib/libadlmint.so.14.0.23 /usr/autodesk/maya2018/lib/libadlmint.so.14.0.23_old
    sudo cp libadlmint.so.14.0.23 /usr/autodesk/maya2018/lib

    最后出现我们喜闻乐见的结果~
    Maya 2018的运行效果

    read more

关注我们

微博
QQ群