Kivy：滚动缩放

Posted 2023-02-15

【中文标题】Kivy：滚动缩放

【英文标题】：Kivy: scroll to zoom

【发布时间】：2018-09-23 05:26:13

【问题描述】：

有没有办法在桌面 kivy 应用程序上放大图像（例如用鼠标滚轮缩放）？它似乎在这里讨论：https://github.com/kivy/kivy/issues/3563 但我不知道是否有解决办法。

我从我的 kivy 应用程序中的静态图像开始。我想添加缩放/平移图像的功能。我不希望图像框架的实际大小发生变化，只需添加缩放/平移功能，就像您可能期望与谷歌地图交互一样。

可能的编程方向

根据我的阅读，我应该使用 Scatter(?)，并且我发现我可以手动设置 Scatter 比例以放大/缩小图像。

我最初的想法是，我必须添加一个带有滚动视图的单独小部件以包含分散布局，这将使图像框架保持一致的大小。然后我需要添加一个动态改变比例值的事件。

问题

我找不到用于更改比例值的适当事件。 on_motion 事件似乎很有希望。我的应用可以使用滑块更新值，但是当我尝试使用 on_motion, 的类似方法时，我得到 AttributeError: motion 错误

我正在努力创建小部件。大多数文档似乎在 python 文件中使用.add_widget(...)。是否可以从 kv 文件中执行此操作？我想这个过程类似于屏幕和屏幕管理器，但我正在努力寻找一种可行的方法。

有没有更直接的方法可以做到这一点？

有没有办法可以在我的 kv 文件中使用 on_motion 类型事件来使用鼠标滚轮调整此值？

我给出了我的 kivy 应用程序结构的淡化示例 - 以及我尝试添加 Scatter 的方法。我想我需要将它放入它自己的小部件中以保持图像大小相同？

玩具示例

import kivy
from kivy.lang import Builder
from kivy.core.window import Window


kivy.require('1.1.0')

from kivy.app import App

presentation = Builder.load_file("scatter.kv")
class TestApp(App):
    def build(self):
        Window.clearcolor = (1, 1, 1, 1)
        return presentation

    # def foo():
    #    print("You've reached foo")    

if __name__ == '__main__':
    TestApp().run()

和

#:kivy 1.10.0
GridLayout:
    cols: 2

    Scatter:
        scale: 5
        # on_motion: root.foo()
        Image :
            source: 'foo.png'
            allow_stretch: True
            keep_ratio: True

    Button:
        text: 'Hello World'

产生：

相关种类：

Scatter Covers whole display kivy（未答复） https://github.com/kivy/kivy/issues/3563

【问题讨论】：

从未理解过Scatter 或ScatterLayout，但您可以在app.build() 方法中使用Window.bind(on_motion=on_motion) 在on_motion() 方法中获取滚动事件。或者，更好的是，您可以将绑定命令放在自定义布局小部件中，并使用实例 on_motion 方法。

请参考我的解决方案detect mouse wheel scrolling

【参考方案1】：

为了实现我的目标，我结合了kivy python3 detect mousewheel 中的信息，正如ikolim 指出的那样，以及此处给出的代码：https://github.com/kivy/kivy/wiki/Draggable-Scalable-Button

为了让我的回答简短，这里是扩展 Scatter 对象的简约对象。

class ResizableDraggablePicture(Scatter):
    def on_touch_down(self, touch):
        # Override Scatter's `on_touch_down` behavior for mouse scroll
        if touch.is_mouse_scrolling:
            if touch.button == 'scrolldown':
                if self.scale < 10:
                    self.scale = self.scale * 1.1
            elif touch.button == 'scrollup':
                if self.scale > 1:
                    self.scale = self.scale * 0.8
        # If some other kind of "touch": Fall back on Scatter's behavior
        else:
            super(ResizableDraggablePicture, self).on_touch_down(touch)

布局略有不同，我更改了按钮上的文本，但我的代码的功能可以在以下 gif 中看到：

对于任何想查看我的整个玩具项目以适应自己的目的的人，整个代码都在我的 github 上：https://github.com/melissadale/Learning-Kivy/tree/master/ZoomPanning

更新我的代码已经被编辑，从面向对象的方法来看更加正确，所以我不能问心无愧地拒绝编辑。然而，当我第一次开始使用 kivy 时，我会发现这段代码令人困惑。如果你只想看简单的版本可以直接申请验证相关，这是我的原始代码：

    if touch.is_mouse_scrolling:
    if touch.button == 'scrolldown':
        print('down')
        ## zoom in
        if self.scale < 10:
            self.scale = self.scale * 1.1

    elif touch.button == 'scrollup':
        ## zoom out
        print('up')
        if self.scale > 1:
            self.scale = self.scale * 0.8

【参考方案2】：

@mdoc-2011 的other answer 的问题是它没有锚定在鼠标指针上，这意味着使用起来很烦人，因为内容会滚动很多。这可以通过不使用.scale 属性而是直接调用apply_transform 来解决：

if touch.is_mouse_scrolling:
    factor = None
    if touch.button == 'scrolldown':
        if self.scale < self.scale_max:
            factor = 1.1
    elif touch.button == 'scrollup':
        if self.scale > self.scale_min:
            factor = 1 / 1.1
    if factor is not None:
        self.apply_transform(Matrix().scale(factor, factor, factor),
                             anchor=touch.pos)

此版本还使用.scale_(min/max) 属性，而不是1.1 和0.8 使用1/1.1，这样可以更直观地滚动进出。