instalar - kivy examples

Botones redondeados de esquinas en kivy.

Question

¿Cuál es la forma preferida de crear esquinas redondeadas para los botones en Kivy?

¿Existen otras formas igualmente viables para realizar esta tarea? Gracias.

Answer 1

Si solo busca buena apariencia, y no es exigente con las esquinas, aunque redondeadas, todavía hay puntos de contacto, puede hacerlo simplemente, como se muestra en este programa de ejemplo (Esto tiene un radio grande para esta muestra):

from kivy.uix.button import Button
from kivy.lang import Builder
from kivy.base import runTouchApp

kv="""
<RoundedButton@Button>:
    background_color: 0,0,0,0  # the last zero is the critical on, make invisible
    canvas.before:
        Color:
            rgba: (.4,.4,.4,1) if self.state==''normal'' else (0,.7,.7,1)  # visual feedback of press
        RoundedRectangle:
            pos: self.pos
            size: self.size
            radius: [50,]
"""
class RoundedButton(Button):
    pass

Builder.load_string(kv)

runTouchApp(RoundedButton(text="Hit Me!"))

Answer 2

Esta es una pregunta difícil. En mi opinión, los Widgets son siempre rectángulos. Pero podemos cambiar el fondo y colocar un par de imágenes para los estados normal y abajo usando las propiedades background_normal y background_down respectivamente. También tendrá que entender la propiedad de la border .

Con estas dos imágenes llamadas normal.png y down.png , puedes comenzar a agregar los bordes redondos.

Aquí está el fragmento de código, que es muy sencillo (intento explicar la propiedad de border continuación):

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.lang import Builder

Builder.load_string("""
<Base>:
    Button:
        background_normal: ''normal.png''
        background_down: ''down.png''
        border: 30,30,30,30
""")


class Base(FloatLayout):
    pass

class ButtonsApp(App):
    def build(self):
        return Base()

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

La forma en que entiendo esto (y podría estar equivocado) es la siguiente. Los valores en el border: 30,30,30,30 cuántos píxeles en la parte superior, derecha, inferior e izquierda se utilizarán para el borde del botón de fondo. El resto se va a llenar con la parte media. No estoy seguro aquí. Por cierto, si desea ver algo genial, vea, por ejemplo, el border: 150,150,150,150 . La razón es que estamos recogiendo un borde más grande que la imagen real.

La advertencia: los widgets siguen siendo rectángulos. Eso significa que incluso si hace clic en las esquinas redondeadas, el botón seguirá recibiendo el evento. Supongo que es un precio justo. Si quieres hacer algo mejor, quizás pueda ayudarte, pero necesitaremos usar algunas matemáticas para colmar los puntos. Uno de los trucos con el tutorial del juego Pong en la documentación es que en realidad la pelota es un cuadrado. Publiqué una pregunta relacionada aquí , pero necesitarás usar el Canvas