拖放图像并在网格布局上显示图像 - Kivy

Question

我是 kivy 的新手，我正在尝试创建一个拖放应用程序，如果将图像拖放到网格布局上，图像将显示在应用程序上，如下所示。我正在尝试获取图像的 file_path，然后使用 file_path 将其显示在网格布局上，但不幸的是，这不起作用。任何帮助将不胜感激！

这是当前图片

拖完图就是我想要的

Kv 文件

# Custom button
<CustButton@Button>:
    font_size: 32
    background_normal: 'Colour_yellow.png'
    background_down: 'Colour_blue.png'

<Cust2@Button>:
    font_size: 32
    background_normal: 'Colour_red.png'
    background_down: 'Colour_blue.png'

<Cust3@Button>:
    font_size: 32
    background_normal: 'Colour_white.png'
    background_down: 'Colour_blue.png'

<Cust4@Button>:
    font_size: 32
    background_normal: 'Colour_blue.png'
    background_down: 'Colour_white.png'

<CalcGridLayout>:
    id: calculator
    display: entry
    rows: 5
    padding: 10
    spacing: 10

    BoxLayout:
        spacing: 100
        size_hint: .5, None
        Cust2:
            text: "Whats the intensity you want?"

    BoxLayout:

        size_hint: .5, None
        TextInput:
            id: entry
            font_size: 70
            multiline: False
            hint_text: "Type here"

    BoxLayout:
        spacing: 100
        size_hint: .5, None
        Cust4:
            text: "Drag and Drop picture below:"
            on_release: root.build1()

    #THIS IS WHERE I'M STUCK ON
    BoxLayout:
        Image:
            source: root._on_file_drop(file_path)

    BoxLayout:
        size_hint: 1, .3
        spacing: 10

        CustButton:
            text: "Click here for \n reduced size"

        CustButton:
            text: "Click here for pos \n  and intensity of \n      each pixel"
            on_release: root.reduced_image()

        CustButton:
            text: "Click here \n for graph"

        CustButton:
            text: "Click here \n     for all"

        CustButton:
            text: "Extra"

Python 文件

import kivy

kivy.require("1.9.0")

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window
Window.clearcolor = (0.5, 0.5, 0.5, 1)


class CalcGridLayout(GridLayout):

    def reduced_image(self):
    #ignore

    def build1(self):
        Window.bind(on_dropfile=self._on_file_drop)
        return

    def _on_file_drop(self, window, file_path):
        print(file_path)
        return file_path



class dropdownApp(App):

    def build(self):
        return CalcGridLayout()


dropApp = dropdownApp()
dropApp.run()

Answer 1

解决方案

有关详细信息，请参阅代码片段和完整示例。

kv 文件

删除on_release: root.build1()
将source: root._on_file_drop(file_path)替换为id: img

片段

BoxLayout:
    spacing: 100
    size_hint: .5, None
    Cust4:
        text: "Drag and Drop picture below:"

BoxLayout:
    Image:
        id: img

Python代码

添加导入语句，from kivy.properties import StringProperty
在 class CalcGridLayout() 中声明属性、filePath = StringProperty('')。
将构造函数添加到class CalcGridLayout()并从build1()方法

Window.bind(on_dropfile=self._on_file_drop)

移除build1()方法
在_on_file_drop()方法中，将return file_path替换为self.filePath = file_path.decode("utf-8")self.ids.img.source = self.filePath和self.ids.img.reload()

片段

from kivy.properties import StringProperty
...

class CalcGridLayout(GridLayout):
    filePath = StringProperty('')

    def __init__(self, **kwargs):
        super(CalcGridLayout, self).__init__(**kwargs)
        Window.bind(on_dropfile=self._on_file_drop)

    def reduced_image(self):
        print(self.filePath)

    def _on_file_drop(self, window, file_path):
        print(file_path)
        self.filePath = file_path.decode("utf-8")     # convert byte to string
        self.ids.img.source = self.filePath
        self.ids.img.reload()   # reload image

Window » on_dropfile Event

on_dropfile(filename)
Event called when a file is dropped on the application.

Warning

This event currently works with sdl2 window provider, on pygame window provider and OS X with a patched version of pygame. This event is left in place for further evolution (ios, android etc.)

例子

main.py

import kivy
kivy.require("1.11.0")

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window
from kivy.properties import StringProperty

Window.clearcolor = (0.5, 0.5, 0.5, 1)


class CalcGridLayout(GridLayout):
    filePath = StringProperty('')

    def __init__(self, **kwargs):
        super(CalcGridLayout, self).__init__(**kwargs)
        Window.bind(on_dropfile=self._on_file_drop)

    def reduced_image(self):
        print(self.filePath)

    def _on_file_drop(self, window, file_path):
        print(file_path)
        self.filePath = file_path.decode("utf-8")     # convert byte to string
        self.ids.img.source = self.filePath
        self.ids.img.reload()   # reload image


class DragDropApp(App):

    def build(self):
        return CalcGridLayout()


if __name__ == "__main__":
    DragDropApp().run()

dragdrop.kv

#:kivy 1.11.0

# Custom button
<CustButton@Button>:
    background_normal: "/home/iam/Pictures/AppImages/Colors/yellow.png"   # 'Colour_yellow.png'
    background_down: "/home/iam/Pictures/AppImages/Colors/blue.png"       # 'Colour_blue.png'
    text_size: self.size
    halign: 'center'
    valign: 'middle'

<Cust2@Button>:
    font_size: 32
    background_normal: "/home/iam/Pictures/AppImages/Colors/red.png"   # 'Colour_red.png'
    background_down: "/home/iam/Pictures/AppImages/Colors/blue.png"     # 'Colour_blue.png'

<Cust3@Button>:
    font_size: 32
    background_normal: "/home/iam/Pictures/AppImages/Colors/white.png"     # 'Colour_white.png'
    background_down: "/home/iam/Pictures/AppImages/Colors/blue.png"       # 'Colour_blue.png'

<Cust4@Button>:
    font_size: 32
    background_normal: "/home/iam/Pictures/AppImages/Colors/blue.png"     # 'Colour_blue.png'
    background_down: "/home/iam/Pictures/AppImages/Colors/white.png"       # 'Colour_white.png'

<CalcGridLayout>:
    id: calculator
    display: entry
    rows: 5
    padding: 10
    spacing: 10

    BoxLayout:
        spacing: 100
        size_hint: .5, None
        Cust2:
            text: "Whats the intensity you want?"

    BoxLayout:
        size_hint: .5, None
        TextInput:
            id: entry
            font_size: 70
            multiline: False
            hint_text: "Type here"

    BoxLayout:
        spacing: 100
        size_hint: .5, None
        Cust4:
            text: "Drag and Drop picture below:"

    BoxLayout:
        Image:
            id: img

    BoxLayout:
        size_hint: 1, .3
        spacing: 10

        CustButton:
            text: "Click here for \n reduced size"

        CustButton:
            text: "Click here for pos \n  and intensity of \n      each pixel"
            on_release: root.reduced_image()

        CustButton:
            text: "Click here \n for graph"

        CustButton:
            text: "Click here \n     for all"

        CustButton:
            text: "Extra"

拖放图像并在网格布局上显示图像 - Kivy

Drag and Drop image and display image on gridlayout - Kivy

python

python-3.x

kivy

kivy-language

解决方案

kv 文件

片段

Python代码

片段

例子

main.py

dragdrop.kv

输出