Botón circular (como un óvalo) usando un lienzo en kivy (usando un archivo .kv)

Kivy es una herramienta GUI independiente de la plataforma en Python. Como se puede ejecutar en Android, IOS, Linux y Windows, etc. Básicamente se usa para desarrollar la aplicación de Android, pero eso no significa que no se pueda usar en aplicaciones de escritorio.
En este artículo, aprenderemos cómo podemos crear un botón redondeado o circular en kivy usando lienzo. Debe tener un concepto muy claro de lienzo, botón y sus propiedades para aprender cómo puede hacer botones como este. Como sabemos, el lienzo es el objeto raíz utilizado para dibujar por un widget. Cada Widget en Kivy ya tiene un Lienzo por defecto. Cuando crea un widget, puede crear todas las instrucciones necesarias para dibujar. 
Para usar el lienzo, debe importar los gráficos en su archivo. 
 

from kivy.graphics import Rectangle, Color

Algunas propiedades importantes utilizadas en este artículo: 
borde: 
1) Borde utilizado para la instrucción de gráficos BorderImage. Usado con background_normal y background_down. Se puede utilizar para fondos personalizados. 
2) Debe ser una lista de cuatro valores: (abajo, derecha, arriba, izquierda). 
3) el borde es una ListProperty y su valor predeterminado es (16, 16, 16, 16)
Comportamiento del botón: 
1) La combinación de comportamiento del botón en la clase proporciona el comportamiento del botón. 
2) Puede combinar esta clase con otros widgets, como una imagen, para proporcionar botones alternativos que conserven el comportamiento del botón Kivy.
 

Basic Approach -
-> import kivy
-> import kivy App
-> import widget
-> import Canvas i.e.:
      from kivy.graphics import Rectangle, Color
-> set minimum version(optional)
-> Extend the Widget class
-> Create the App Class
-> create the .kv file:
    -> create the button using the canvas
    -> Use border property to give them a circular shape.
    -> Add action/callback if needed
-> return a Widget
-> Run an instance of the class

Tutorial de Kivy – Aprende Kivy con ejemplos

Implementación del Enfoque
main.py 
 

Python3

## Sample Python application demonstrating the
## working of canvas with buttonbehaviour i.e
## creating a circular button in Kivy using .kv file
   
###################################################
# import kivy module
import kivy
     
# this restrict the kivy version i.e
# below this kivy version you cannot
# use the app or software
kivy.require("1.9.1")
     
# base Class of your App inherits from the App class.
# app:always refers to the instance of your application
from kivy.app import App
 
# From graphics module we are importing
# Rectangle and Color as they are
# basic building of canvas.
from kivy.graphics import Rectangle, Color
 
# The ButtonBehavior mixin class provides Button behavior.
from kivy.uix.button import ButtonBehavior
 
# The Label widget is for rendering text.
from kivy.uix.label import Label
 
# class in which we are creating the canvas
class CircularButton(ButtonBehavior, Label):
    pass
 
# Create the App Class
class BtnApp(App):
    def build(self):
        return CircularButton()
 
# run the App
BtnApp().run()

archivo .kv 
 

Python3

# .kv file of creating a circular button using canvas
 
<CircularButton>:
 
    # Creating Circular button
    canvas:
 
        # Color is different if button is pressed
        Color:
            rgb: (0, 1, 0, 1) if self.state == 'normal' else (1, 0, 1, 1)
     
        # Rounded rectangle canvas
        RoundedRectangle:
 
                        # Giving the size and the position
            size: (self.size)
            pos: (self.pos)
             
            # This will force the rectangle to be the circle
            radius: [400, ]
         
 
    # Print the text when touched or button pressed    
    on_release:
        print("This is the button made up by the canvas")

Producción: 
 

Nota: los widgets siguen siendo rectángulos. Eso significa que incluso si hace clic en las esquinas redondeadas, el botón seguirá recibiendo el evento.
 

Publicación traducida automáticamente

Artículo escrito por YashKhandelwal8 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *