如何在 kivy 中使用 Scatter 小部件精确拖动图片

Question

我是一个 kivy 新手，我正在尝试通过将一组小图片嵌入到 Scatter 小部件中来移动它们。图片实际尺寸为 160*200 像素。 图片在我使用的 FloatLayout 上正确显示（正确位置），但是当我尝试移动其中一个时，Scatter 的边界框比图像大很多倍，我无法通过单击每个相应的来选择它们中的每一个图片。 我使用的非常基本的 kv 代码如下：

<TTTGame>:      
FloatLayout:
    Scatter:
        pos: 200, 800
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/h2red.jpeg'
            size_hint: 1, 1
            allow_strech: True
            keep_ratio: False
            size: 70, 100

    Scatter:
        pos: 200+(300*1), 800
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/h3red.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200+(300*2), 800
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/h4red.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200, 400
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/c2black.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200+(300*1), 400
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/c3black.jpeg'
            size_hint: None,None
            size: 70, 100

    Scatter:
        pos: 200+(300*2), 400
        size: 70,100
        do_rotation: False
        do_scale: False
        do_translation: True
        auto_bring_to_front: True

        Image:
            source: 'data/c4black.jpeg'
            size_hint: None,None
            size: 70, 100

Splitter:
    sizable_from: 'left'
    size_hint: 0.3, 1

    BoxLayout:
        orientation: 'vertical'
        size_hint: 1, 1
        spacing: 10
        padding: 20

        BoxLayout:
            orientation: 'vertical'
            size_hint: 0.7, 0.7

            Label:
                text: 'Game card'
                size_hint: 1, 0.1
                font_size: 20

            Image:
                source: 'data/h2red.jpeg'
                size_hint: 0.9, 0.9

        Button:
            text: 'PASS'
            size_hint: 1, .2
            font_size: 18
            on_press: root.pass_on_press_callback()

        Button:
            text: 'Help'
            size_hint: 1, .2
            font_size: 18
            on_press: root.help_on_press_callback()

基本上，我想要一个和图片一样大的 Scatter。 请问有高手可以帮帮我吗？

Answer 1

我认为您需要的一切都是here。这是在 Scatter 中使用图片的一个很好的文档示例。

main.py:

import kivy
kivy.require('1.0.6')

from glob import glob
from random import randint
from os.path import join, dirname
from kivy.app import App
from kivy.logger import Logger
from kivy.uix.scatter import Scatter
from kivy.properties import StringProperty
# FIXME this shouldn't be necessary
from kivy.core.window import Window


class Picture(Scatter):
    '''Picture is the class that will show the image with a white border and a
    shadow. They are nothing here because almost everything is inside the
    picture.kv. Check the rule named <Picture> inside the file, and you'll see
    how the Picture() is really constructed and used.
    The source property will be the filename to show.
    '''

    source = StringProperty(None)


class PicturesApp(App):

    def build(self):

        # the root is created in pictures.kv
        root = self.root

        # get any files into images directory
        curdir = dirname(__file__)
        for filename in glob(join(curdir, 'images', '*')):
            try:
                # load the image
                picture = Picture(source=filename, rotation=randint(-30,30))
                # add to the main field
                root.add_widget(picture)
            except Exception as e:
                Logger.exception('Pictures: Unable to load <%s>' % filename)

    def on_pause(self):
        return True


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

图片.kv：

#:kivy 1.0
#:import kivy kivy
#:import win kivy.core.window

FloatLayout:
    canvas:
        Color:
            rgb: 1, 1, 1
        Rectangle:
            source: 'data/images/background.jpg'
            size: self.size

    BoxLayout:
        padding: 10
        spacing: 10
        size_hint: 1, None
        pos_hint: {'top': 1}
        height: 44
        Image:
            size_hint: None, None
            size: 24, 24
            source: 'data/logo/kivy-icon-24.png'
        Label:
            height: 24
            text_size: self.width, None
            color: (1, 1, 1, .8)
            text: 'Kivy %s - Pictures' % kivy.__version__



<Picture>:
    # each time a picture is created, the image can delay the loading
    # as soon as the image is loaded, ensure that the center is changed
    # to the center of the screen.
    on_size: self.center = win.Window.center
    size: image.size
    size_hint: None, None

    Image:
        id: image
        source: root.source

        # create initial image to be 400 pixels width
        size: 400, 400 / self.image_ratio

        # add shadow background
        canvas.before:
            Color:
                rgba: 1,1,1,1
            BorderImage:
                source: 'shadow32.png'
                border: (36,36,36,36)
                size:(self.width+72, self.height+72)
                pos: (-36,-36)

Answer 2

一个最小化的例子。

from kivy.app import App
from kivy.properties import StringProperty
from kivy.lang import Builder

KV = """

#:import win kivy.core.window

<Picture@Scatter>:
   source: None
   on_size: self.center = win.Window.center
   size: image.size
   size_hint: None, None

   Image:
       id: image
       source: root.source

FloatLayout:
   Picture:
       source: "test.jpg"
   Picture:
       source: "test.jpg"

"""

class MyApp(App):

    def build(self):
        return Builder.load_string(KV)

MyApp().run()