将文件拖到Kivy小部件的边界区域

huangapple go评论45阅读模式
英文:

drag file onto bounding area of kivy widget

问题

我想在我拖动一个 .png 文件到我的 Kivy 窗口的特定区域时显示一张图片。我一直在尝试使用以下代码来可视化我的小部件和布局的边界区域:

canvas.before:
    Color:
        rgb: 1, 0, 0
    Rectangle:
        pos: self.pos
        size: self.size

然而,由于以下代码的行为,我还不确定我是否完全理解它:

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Created on Sun Nov 20 08:42:50 2022
@author: erik
"""
import kivy
kivy.require('2.1.0')
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import StringProperty
from kivy.core.window import Window

Builder.load_string('''
<MyLayout>:
    padding: 20,20, 20, 20
    id: img_box
    orientation: 'vertical'
    size_hint_min_x: self.minimum_width
    size_hint_min_y: self.minimum_height
    canvas.before:
        Color:
            rgb: 1, 0, 0
        Rectangle:
            pos: self.pos
            size: self.size
    Splitter:
        sizable_from: 'bottom'
        id: dig_img_spltr
        canvas.before:
            Color:
                rgb: 1, 1, 0
            Rectangle:
                pos: self.pos
                size: self.size
        rescale_with_parent: True
        Image:
            id: dig_img
    Button:
        text: 'hello'
        size_hint: .6,.6
        pos_hint: {'center_x': .5, 'center_y':.5}
''')

class MyLayout(BoxLayout):
    digimgfilePath = StringProperty('')
    def __init__(self, **kwargs):
        super(MyLayout, self).__init__(**kwargs)
        Window.bind(on_drop_file=self._on_file_drop)

    def _on_file_drop(self, window,  filename, x, y):
        print(f'x: {x}')
        print(f'y: {y}')
        x_lower_bound = self.ids.dig_img_spltr.pos[0]
        x_upper_bound = self.ids.dig_img_spltr.pos[0] + self.ids.dig_img_spltr.width
        y_lower_bound = self.ids.dig_img_spltr.pos[1]
        y_upper_bound = self.ids.dig_img_spltr.pos[1] + self.ids.dig_img_spltr.height
        print(f'xlb {x_lower_bound}')
        print(f'xub {x_upper_bound}')
        print(f'ylb {y_lower_bound}')
        print(f'yub {y_upper_bound}')
        print()
        if self.ids.dig_img_spltr.collide_point(x,y):
            self.digimgfilePath = filename.decode("utf-8")
            self.ids.dig_img.source = self.digimgfilePath
            self.ids.dig_img.reload()

class sliderdropApp(App):
    def build(self):
        return MyLayout()

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

我想要并期望的是,在我将文件拖放到分隔符上方的区域时,显示一张图片(例如 .png 文件)。但是,我无法理解collide_point返回True的区域。当我将文件拖放到分隔符的上方和下方的一些难以解释的边距内时,它会返回True。当我成功显示一张图片后,分隔符的画布不会变成黄色。这个黄色区域是否由画布定义,而不是分隔符的相同区域?为什么当我将文件拖放到分隔符画布着色的区域时,collide_point不返回True

英文:

I want to display an Image when I drag a .png into a specific area of my Kivy window. I've been trying to visualize the bounding area of my widgets and layouts using

canvas.before:
Color:
rgb: 1, 0, 0
Rectangle:
pos: self.pos
size: self.size

However I'm not convinced I understand this yet, because of the behavior I get with the following:

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
&quot;&quot;&quot;
Created on Sun Nov 20 08:42:50 2022
@author: erik
&quot;&quot;&quot;
import kivy
kivy.require(&#39;2.1.0&#39;)
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import StringProperty
from kivy.core.window import Window
Builder.load_string(&#39;&#39;&#39;
&lt;MyLayout&gt;:
padding: 20,20, 20, 20
id: img_box
orientation: &#39;vertical&#39;
size_hint_min_x: self.minimum_width
size_hint_min_y: self.minimum_height
canvas.before:
Color:
rgb: 1, 0, 0
Rectangle:
pos: self.pos
size: self.size
Splitter:
sizable_from: &#39;bottom&#39;
id: dig_img_spltr
canvas.before:
Color:
rgb: 1, 1, 0
Rectangle:
pos: self.pos
size: self.size
#keep_within_parent: True
rescale_with_parent: True
Image:
id: dig_img
Button:
text: &#39;hello&#39;
size_hint: .6,.6
pos_hint: {&#39;center_x&#39;: .5, &#39;center_y&#39;:.5}
&#39;&#39;&#39;)
class MyLayout(BoxLayout):
digimgfilePath = StringProperty(&#39;&#39;)
def __init__(self, **kwargs):
super(MyLayout, self).__init__(**kwargs)
Window.bind(on_drop_file=self._on_file_drop)
def _on_file_drop(self, window,  filename, x, y):
&#39;&#39;&#39;
Documentataion for on_drop_file
doesn&#39;t show window parameter. I
found this out with locals()
&#39;&#39;&#39;
print(f&#39;x: {x}&#39;)
print(f&#39;y: {y}&#39;)
x_lower_bound = self.ids.dig_img_spltr.pos[0]
x_upper_bound = self.ids.dig_img_spltr.pos[0] + self.ids.dig_img_spltr.width
y_lower_bound = self.ids.dig_img_spltr.pos[1]
y_upper_bound = self.ids.dig_img_spltr.pos[1] + self.ids.dig_img_spltr.height
print(f&#39;xlb {x_lower_bound}&#39;)
print(f&#39;xub {x_upper_bound}&#39;)
print(f&#39;ylb {y_lower_bound}&#39;)
print(f&#39;yub {y_upper_bound}&#39;)
print()
#if x_lower_bound &lt; x &lt; x_upper_bound and y_lower_bound &lt; y &lt; y_upper_bound:
if self.ids.dig_img_spltr.collide_point(x,y):
self.digimgfilePath = filename.decode(&quot;utf-8&quot;)     # convert byte to string
self.ids.dig_img.source = self.digimgfilePath
self.ids.dig_img.reload()   # reload image
class sliderdropApp(App):
def build(self):
return MyLayout()
if __name__ == &#39;__main__&#39;:
sliderdropApp().run()

What I want, and expect, is for a image (.png for example) to be displayed when I drop the file into the area above the splitter. But I can't make sense of the area where collide_point returns True. It returns True when I drop the file within some un-explainable margin above and below the splitter. After I do get an image to display, the splitter canvas does to turn yellow above the splitter. Is this yellow area defined by the canvas not the same area of the splitter? Why doesn't collide_point return True when I drop on the area colored by the splitter's canvas?

答案1

得分: 0

on_drop_file事件中的y维度与窗口坐标相反。如果我将(x,Window.size[1] - y)发送给collide_point,它就会按我期望的方式工作。

英文:

The y dimension from the on_drop_file event is inverted from the window coordinates. If I send (x, Window.size[1] - y) to collide_point, it works as I expect and intent it to.

huangapple
  • 本文由 发表于 2023年1月9日 04:13:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75050956.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定