Flickable 浏览可缩放图片的问题



  • 先放源码

    import QtQuick 2.5
    import QtQuick.Controls 1.3
    
    ApplicationWindow {
        id: window
        visible: true
        width: 600
        height: 650
    
        Rectangle {
    
            width: 400
            height: 400
            border.color: "black"
            border.width: 1
            anchors.centerIn: parent
    
            Flickable {
                id: flickable
    
                anchors.fill: parent
    
                contentWidth: scaleWarp.width
                contentHeight: scaleWarp.height
    
                Behavior on contentX { NumberAnimation {duration: 1000 } }
    
                Behavior on contentY { NumberAnimation {duration: 1000 } }
    
                Rectangle {
                    id: scaleWarp
                    width:  image.width * image.myScale
                    height: image.height * image.myScale
    
                    color: "red"
                    opacity: 0.2
    
                    Image {
                        id: image
                        // 图片大概 500* 500
                        source: "./images/001.png"
                        transform: Scale {
                            id: imageScale
                            xScale:  image.myScale
                            yScale:  image.myScale
                        }
    
                        Behavior on x { NumberAnimation {duration: 1000 } }
    
                        Behavior on y { NumberAnimation {duration: 1000 } }
    
                        property real myScale: 1
                        Behavior on myScale {  NumberAnimation {duration: 1000 } }
    
                        MouseArea {
                            anchors.fill: parent
                            onDoubleClicked: {
                                if(image.myScale == 1) {
                                    var maxScale = 1.5;
    
                                    imageScale.origin.x = mouseX;
                                    imageScale.origin.y = mouseY;
    
    //                                image.x  = mouseX*(1.0-(1.0/maxScale))
    //                                image.y = mouseY*(1.0-(1.0/maxScale))
    //                                flickable.contentX = mouseX*(1.0-(1.0/maxScale))
    //                                flickable.contentY = mouseY*(1.0-(1.0/maxScale))
    
                                    image.myScale = 1.5;
                                } else {
                                    image.myScale =1;
    //                                flickable.contentX = 0;
    //                                flickable.contentY = 0;
    //                                image.x = 0;
    //                                image.y = 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    

    现在缩放后,Image 的部分内容以某一个参考点进行缩小放大,在放大时,部分视图会超出 contentItem

    问题如下: Image 缩放后如何计算让其贴合到 contentItem 上。

    ps 运行一下代码,即可知道,运行后视图内,红色的区域用来标注 contentItem 的,在缩放后,contentItem 是以左上角为参考,向右向下延伸的。




  • 网站研运

    @qyvlik 我的第二款独立游戏《十日驱鬼记》就解决过这样的问题。具体方法就是计算contentItem以及Flickable的contentWidth和contentHeight之间的关系,用程序的办法避免超出 contentItem。
    代码我没有运行,我只是提出了我的一点拙见。


 

最近的回复

  • 0_1531879249244_9090909.jpg
    各位上午好哦。很高兴告诉大家,我们的萌梦社区又进行了一波更新了!
    这次主要更新在论坛代码层面上的,也就是说我们根据NodeBB官方的指示,将论坛从1.9.3升级到了1.10.1了!整个升级过程会产生一些服务暂停的现象,不过没有关系,很快就可以得到恢复,现在咱们可以顺利地在新的论坛上玩耍了!
    这次更新按照NodeBB官方的说法,主要在论坛的稳定性和迎合欧盟的GPDR政策(隐私权保护政策)上,也就是说,咱们论坛默认是支持用户的隐私权保护的~不要担心自己的隐私会被黑客利用什么的,但是大家还是要保护好平时论坛登录的密码哦。合适的时候还是使用浏览器的记住密码功能~

    此外,之前萌梦论坛之前的SSL加密是免费的,费时效果又不好。在手机浏览器上显示并非可靠的颁发者,现在换了新的证书,感觉好了不少。现在又可以在论坛上玩耍啦。

    好了,就是这样~

    阅读更多
  • @jiangcaiyang 是不支持QVector3D类型么,需要引用头文件还是需要转换类型呢

    阅读更多
  • 可能是Qt制作的Python绑定Shiboken遇到了问题。求先行者能够解忧~😵

    阅读更多
  • 0_1531804634749_5.jpg
    我使用的是PyCharm作为IDE,下载了Qt for Python(使用Qt 5.11),并且使用git克隆了pyside的源代码 + 例子。因为自己对OpenGL感兴趣,所以随手运行了一个例子。首先是PyOpenGL没有安装。

    0_1531804316021_1f365ea0-46b3-460d-9a00-c8cdeccf98af-image.png

    通过对话框弹出的命令,在terminal上运行

    python -m pip install PyOpenGL PyOpenGL_accelerate

    就可以了。

    虽然窗体以及3D内容出来了,但是命令提示符中会出现一些问题:

    D:/QtProject/pyside-setup/examples/opengl/hellogl2.py:394: RuntimeWarning: SbkConverter: Unimplemented C++ array type. self.program.setUniformValue(self.lightPosLoc, QVector3D(0, 0, 70)) D:/QtProject/pyside-setup/examples/opengl/hellogl2.py:423: RuntimeWarning: SbkConverter: Unimplemented C++ array type. self.program.setUniformValue(self.projMatrixLoc, self.proj) D:/QtProject/pyside-setup/examples/opengl/hellogl2.py:424: RuntimeWarning: SbkConverter: Unimplemented C++ array type. self.program.setUniformValue(self.mvMatrixLoc, self.camera * self.world) D:/QtProject/pyside-setup/examples/opengl/hellogl2.py:426: RuntimeWarning: SbkConverter: Unimplemented C++ array type. self.program.setUniformValue(self.normalMatrixLoc, normalMatrix)

    刚学习Python,还不清楚是怎么回事,怎么解决才好。

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔