QtQuick 实现图片缩放预览



  • QtQuick 实现图片缩放预览

    如何用 QtQuick 实现类似手机上那种图片预览,支持缩放,拖动。

    • 双击图片某个位置,就会相应的放大对应的部分

    • 放大的图片可以拖动

    • 可以双指缩放

    • 可以双指旋转

    以上还是单个图片的。

    像图库那样,除了可以查看单张图片,还可以通过滑动查看下一张图片。在当前图片放大后,仍然可以通过滑动,切换到下一张图片。

    @jcy @MidoriYakumo



  • @qyvlik 我的第二款独立游戏《十日驱鬼记》中的地图就是类似的做法,其实也不是很复杂。



  • @jiangcaiyangQtQuick 实现图片缩放预览 中说:

    十日驱鬼记

    有源码或者思路可以参考吗?

    像图库那样,除了可以查看单张图片,还可以通过滑动查看下一张图片。在当前图片放大后,仍然可以通过滑动,切换到下一张图片。

    这里要怎么处理 ListView 和图片缩放的鼠标(触控)事件?


  • 网站研运

    @qyvlik 我是使用Flickable这个类的,还有我也使用了PinchArea来处理多点触控。



  • 同问:
    请教一个问题,请问QtQuick中flickable中如果存放一个图片如果图片放大缩小如何同步坐标系?我在图像缩放之后同步设置了flickable中的contentWidth和contentHeight,然后利用
    returnToBounds()来自动调整内容位置,但是感觉好像没有作用。

    图片水平不动其实我手动设置调整其实还好,但是涉及到旋转...width和height都变化了,手动就比较繁琐了,想借助于returnToBounds(),但是感觉好像没有作用啊。

    我是直接在flickable中嵌入image这样做实验的,但是没有效果。



  • import QtQuick 2.7
    import QtQuick.Controls 2.0

    ApplicationWindow {
    id: root
    visible: true
    width: 200
    height: 200

    Flickable {
        id:flickable
        anchors.fill: parent
        contentWidth: picture.width
        contentHeight: picture.height
    
        ScrollBar.vertical: ScrollBar { id: scrollBarV }
        ScrollBar.horizontal: ScrollBar { id: scrollBarH }
    
        Image{
            id:picture
            transformOrigin: Item.TopLeft
            fillMode: Image.PreserveAspectFit;
            source: "qrc:/C:/Users/user/Pictures/test.jpg"
            }
    }
    
    function swapFlickContentSize()
    {
        var temp = flickable.contentWidth;
        flickable.contentWidth = flickable.contentHeight;
        flickable.contentHeight = temp;
    }
    
    function updateImgOffsetPosition()
    {
        var quadrant = picture.rotation/90%4;
        if (quadrant == 0)
        {
            picture.x = 0;
            picture.y = 0;
        }else if(quadrant == 1 || quadrant == -3)
        {
            picture.x = picture.paintedHeight*picture.scale;
            picture.y = 0;
        }else if(quadrant == 2 || quadrant == -2)
        {
            picture.x = picture.paintedWidth*picture.scale;
            picture.y = picture.paintedHeight*picture.scale;
        }else if(quadrant == 3 || quadrant == -1)
        {
            picture.x = 0;
            picture.y = picture.paintedWidth*picture.scale;
        }
    }
    
    function updateFlickContentSize()
    {
        var quadrant = picture.rotation/90%2;//180度时长和宽保持不变,90度奇数倍时交换长和宽
        if (quadrant == 0)
        {
            flickable.contentWidth =  picture.scale*picture.paintedWidth;
            flickable.contentHeight =  picture.scale*picture.paintedHeight;
        }else
        {
            flickable.contentWidth =  picture.scale*picture.paintedHeight;
            flickable.contentHeight =  picture.scale*picture.paintedWidth;
        }
    }
    
    Button{
        id:zoomin
        text:"zoomin"
        x:0
        y:0
        onClicked: {
            var factor = picture.scale;
            if(factor < 1){
                picture.scale = factor + 0.25;
            }else if(factor < 16){
                picture.scale = factor + 1;
            }
            updateFlickContentSize();
            updateImgOffsetPosition();
        }
    }
    
    Button{
        id:zoomout
        text:"zoomout"
        x:0
        y:50
        onClicked: {
            var factor = picture.scale;
            if(factor > 1){
                picture.scale = factor - 1;
            }else if(factor > 0.25){
                picture.scale = factor - 0.25;
            }
            updateFlickContentSize();
            updateImgOffsetPosition();
        }
    }
    Button{
        id:rotateR
        text:"Rotate Right"
        x:0
        y:100
        onClicked: {
            picture.rotation += 90;
            swapFlickContentSize();
            updateImgOffsetPosition();
        }
    }
    
    Button{
        id:rotateL
        text:"Rotate Left"
        x:0
        y:150
        onClicked: {
            picture.rotation -= 90;
            swapFlickContentSize();
            updateImgOffsetPosition();
        }
    }
    

    }

    我通过手动设置解决了我的需求,我的思路:1.transformOrigin: Item.TopLeft固定住左上角作为起点坐标系,这和我们常见GUI坐标系比较接近,容易设置offset,相对简单。默认变形起点为center,会随着图像不同尺寸而变化,不太容易设置。2.此处选用paintedHeight和paintedWidth是因为这是实际用来显示和放大缩小使用的基准图像,和contentWidth和contentHeight对应一致。3,我是qtquick新手。。。所以采用的解决方案比较使用的多是js函数,而非qml本身的一些解决方案。 仅供参考吧。4.returntobounds()函数无法奏效的原因可能是scale变化之后的图像对与flick的content没有任何影响,因为我使用console.log输出的contentX ,originX,image.x等等都是默认一致的,没有任何变化,所以推测content默认还是你image的原始内容,除非你更改你的image原始内容大小,否则returntobounds无法作用,但是更改图像就违背我们的初衷了。


Log in to reply
 

走马观花

最近的回复

  • 113.jpg
    1、什么是lambda表达式,什么是闭包?
    lambda表达式即lambda函数,也就是匿名函数。

    lambda表达式在C++中包含了
    []表示捕获
    ()是函数的参数,需要指定类型
    ->type是返回的类型,可以省略,如果编译器无法推出类型的话可以强制编写
    {}是函数体。

    lambda可以被声明为mutable的,作用是将捕获的内容进行改变。
    闭包是函数的定义以及定义函数时提供的环境,总称为闭包。lambda函数也是一种闭包。
    lambda本身是匿名函数,而捕获语句则是提供了定义函数时提供的环境。

    2、什么是右值引用?
    右值引用相对与左值引用而言的。左值即=运算符左边的变量,右值是=运算符右边的常量或变量。由此可以看出,
    右值引用指的是对常量或变量的引用。它的用途包含了移动语义和完美转发。
    移动语义就是弥补了C++历史在处理变量传递时丢失的一种语义。它和值传递、引用传递一样,是变量传递的方式之一。
    如果没有移动语义,为了将一个类的实例传递给另外一个实例,就需要额外地进行构造、赋值、销毁的操作。
    对于一些比较复杂的变量,的确是非常耗时并且消耗大的操作。(浪费指令时间、浪费内存)

    对于这样的函数返回:
    vector<string> str_split(const string& s) {
    vector<string> v;
    // ...
    return v; // v是左值,但优先移动,不支持移动时仍可复制。
    }

    标准要求先调用移动构造函数,如果不符合那么再调用拷贝构造函数。所以可以轻松地写出这种写法而不必担心效率问题。
    同时,现代编译器都会对返回值进行优化,成为RVO以及NRVO。所以不用太担心会多调用构造析构函数。

    对于完美转发,C++对于引用的转发有规则。传统的C++是无法对引用进行再引用的。但是现代的C++放宽了它的使用范围。
    只有右引用右值的时候,才会产生右引用。这也称为引用折叠。

    3、auto关键字的作用是什么?
    auto关键字为的是能够让编译器自动推导类型。自C++98之后,编译器对类型的推导变得越来越智能了。
    而我们在编写复杂代码的时候,冗长的类型不仅容易出错,有时也不容易人工推导出类型。
    因此auto可以简化我们的任务量,让类型的推导交给编译器完成。
    除了auto外,我们还可以使用decltype()来让编译器推导类型。

    read more
  • 我感觉比起《Physically Based Rendering Technique》,还是《Ray Tracing in a Weekend》更容易上手,因为慢慢地能够做出一个渲染效果,这个是有成就感的。🎓

    read more
  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!ccfd91efc3a6b2ed0e79054d2248eed.jpg bf6015b383483f1fe83cdcfd130fc6b.jpg 2f347879129add1096bf3424edbe517.jpg

    read more

关注我们

微博
QQ群