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

时间:2014-11-03 16:50:10

标签: python 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和图片一样大。 请问有专家可以帮助我吗?

2 个答案:

答案 0 :(得分:0)

我认为你需要的只是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()

pictures.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)

答案 1 :(得分:0)

一个最小的例子。

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()