Zmiana tła przycisku na inny kształt i stylów, takich jak efekt cienia itp w kivy pytona

Question

dowiedziałem się, że w Qt mamy kilka sposobów, aby dokonać QPushButton z:

1. efekt cienia
2. czyni go Płasko dzięki ustawieniu właściwości setFlat na True.
3. chaning kursor innego rodzaju, jeżeli ktoś unosi się nad nim jak pushButton_18.setCursor (QtGui.QCursor (QtCore.Qt.PointingHandCursor))

szukam aby Przyciski zachowania podobnego w kivy również. Czy to możliwe ? dowiedziałem się, że możemy zmienić obraz tła zmienił się obraz z zaokrąglonym kształcie Changing the background color of a Button in Kivy

ale to nie jest tak satysfakcjonujące jak przycisk nadal wygląda bardzo normalne. Nie ma wpływu cienia. Nawet gdy klikniemy rogi poza przyciskiem, zostanie to potraktowane, jeśli kliknięty zostanie przycisk.

Przeszedłem przez dokumentację Kivy Button oraz etykiety i próbowałem zmienić zachowanie i wygląd przycisku. Rada może ktoś jak zrobić wygląd przycisku lepiej Możemy starać się mieć:

1. Shadowing wpłynąć
2. Animacja wpływa w tle
3. zaokrąglone krawędzie itp.
4. możemy umieścić animowane GIF jako tła dla animacji (I nie spróbować, ale to nie było animowane więcej)

Poniżej znajduje się kod, który ja po prostu stworzony do odkrywania więcej na guziki w Kivy:

__author__ = 'pbatra' 
#Good info about background 
#https://stackoverflow.com/questions/20181250/changing-the-background-color-of-a-button- in-kivy/20181407#20181407 

from kivy.app import App 
from kivy.lang import Builder 
from kivy.uix.screenmanager import ScreenManager, Screen 
from kivy.properties import ObjectProperty 
from kivy.uix.image import Image 
from kivy.graphics import Color 


gui = ''' 
<MenuScreen>: 
    canvas.before: 
     BorderImage: 
      # BorderImage behaves like the CSS BorderImage 
      border: 10, 10, 10, 10 
      texture: self.background_image.texture 
      pos: self.pos 
      size: self.size 
    GridLayout: 
     size_hint: .1, .1 
     pos_hint: {'center_x': .5, 'center_y': .5} 
     rows: 1 
     Button: 
      text: 'Play' 
      font_size: 20 
      font_name: 'DroidSans' 
      bold: True 
      italic: True 
      height: 10 
      background_color: (0.5, 0.7, 0.5, 0.9) 
      #Read more about them from documentation 
      background_normal: './images/orange.png' 
      background_down: './images/green.png' 
      border: 30,30,30,30 
      color: (1, .3, .8, .5) 

     on_press: self.text = 'Oh yeah' 

''' 


class MenuScreen(Screen): 
    background_image = ObjectProperty(
           Image(
            source='../Examples/examples/widgets/sequenced_images/data/images/button_white_animated.zip', 
            anim_delay=.5)) 
    Builder.load_string(gui) 
    pass 

# Create the screen manager 
sm = ScreenManager() 
sm.add_widget(MenuScreen(name='menu')) 


class MyJB(App): 
    def build(self): 
     return sm 

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

Answer 1

Przycisk w kivy rozpoczyna się od ButtonBehavior, który łączy się z Label właściwościami dodawania, takimi jak background_normal/down ... do obsługi tekstur na płótnie.

Wiedząc o tym, możesz po prostu połączyć ButtonBehavior z dowolnym innym widżetem, który wybierzesz. Na przykład.

from kivy.base import runTouchApp 
from kivy.lang import Builder 

kv = ''' 
<ButImage@ButtonBehavior+AsyncImage> 

FloatLayout: 
    # we don't specify anything here so float layout takes the entire size of the window. 
    ButImage: 
     id: but 
     # take 50% size of the FloatLayout 
     size_hint: .5, .5 
     # Make Button change it's opacity when pressed for visual indication 
     opacity: 1 if self.state == 'normal' else .5 
     source: 'http://www.victoriamorrow.com/sitebuildercontent/sitebuilderpictures/enter_button.gif' 
     # Introduce Label incase you want text on top of the image 
     Label: 
      center: but.center 
      # change text acc to but state 
      text: "Normal" if but.state == 'normal' else 'down' 
''' 

if __name__ == '__main__': 
    runTouchApp(Builder.load_string(kv)) 

Tu wystarczy ustawić ButtonBehavior być połączone z AsyncImage który pobiera obraz z sieci dla tła.

powinieneś zobaczyć coś takiego

Animacji wpływa w tle

Byłoby tak proste, jak zmiana źródła do animowanego gif lub listy obrazów wewnątrz .zip.

from kivy.base import runTouchApp 
from kivy.lang import Builder 


kv = ''' 
<ButImage@ButtonBehavior+AsyncImage> 

FloatLayout: 
    ButImage: 
     id: but 
     size_hint: .5, .5 
     opacity: 1 if self.state == 'normal' else .5 
     allow_stretch: True 
     keep_ratio: False 
     source: 'http://media1.policymic.com/site/article-items/2095/1_gif.gif' 
     Label: 
      center: but.center 
      text: "Normal" if but.state == 'normal' else 'down' 


''' 

if __name__ == '__main__': 
    runTouchApp(Builder.load_string(kv)) 

Spójrz na sequence images example to było zrobione przed ButtonBehaviors wprowadzono więc ma nawet przykład klasy AnimatedButton korzystasz ze starszej metody, która nie jest w zasadzie potrzebne.

Cień Efekt:

Istnieje wiele sposobów, aby to zrobić też.

Możesz dodać cień do widżetu/układu i mieć przycisk na wierzchu tego widgetu/układu zajmujący mniej miejsca niż cień, aby uwzględnić dotknięcie cienia.

Lub Utwórz własną klasę CustomButtonBehavior wywodzącą się z ButtonBehavior, która zastępuje metodę collidepoint tylko zwracając wartość True dla kolizji niestandardowej. Istnieje przykład użycia widgetów w postaci custom collision. Możesz nawet ustawić właściwość Image na keep_data na True, a później sprawdzić dane pixel dla alfa, aby określić, czy chcesz zwrócić wartość true dla kolizji.

Zaokrąglone krawędzie itp

użyć zwykłego obrazu z zaokrąglonymi krawędziami kivy umożliwia stosowanie BorderImage poleceń, które są równoważne css borderimage pod względem funkcjonalności. Sam przycisk Kivy używa tego domyślnie. Spróbuj i eksperymentuj z atrybutem border of BorderImage.