Geek tričko zdarma Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 4 - Reakce na kliknutí/dotek a aplikace Malování v Kivy

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Zdravím vás u další lekce Kivy frameworku pro Python. V minulé lekci, Dynamické pozicování widgetů v Kivy, jsme si ukázali jak dynamicky pozicovat widgety a upevnili jsme si znalosti ohledně Kivy language. V dnešním Python tutoriálu si představíme reakci na kliknutí a pohyb myši a poté si vytvoříme jednoduchou aplikaci Malování.

Reakce na pohyb

Nejdříve se musíme naučit reagovat na kliknutí a pohyb myši, abychom si mohli slibovanou aplikaci Malování vytvořit. Jako příklad nám poslouží upravená aplikace z předchozí lekce, která zobrazovala Labely na námi uvedené pozici, jelikož jsme nepoužívali žádný layout.

Z našeho .kv souboru aplikace smažeme pouze Label2 a zbytek ponecháme:

#:kivy 1.10.1
#:import math math

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

<MujWidget>:

    label1: label1

    Label:
        id: label1
        text: str(round(math.pi, 5))
        pos: root.width - self.width, root.top - self.height

Abychom mohli reagovat na kliknutí nebo pohyb myši v Kivy frameworku, musíme si vytvořit 3 metody:

  • on_touch_down(touch) - reakce na kliknutí
  • on_touch_up(touch) - reakce na opak kliknutí (puštění tlačítka myši/zvednutí prstu)
  • on_touch_move(touch) - reakce na pohyb myši/prstu

Parametr touch v sobě skrývá pozici kliknutí/doteku. My budeme chtít přesouvat náš Label1 na aktuální pozici myši, proto využijeme touch.x a touch.y. Nevyužijeme touch.pos jelikož vrací tuple s pozicí a my potřebujeme od těchto pozic odečíst velikost Labelu. Samozřejmě lze odečíst od sebe tuple a tuple, ale je to zbytečné:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.app import App

class MujWidget(Widget):

    def on_touch_down(self, touch):
        self.label1.pos = (touch.x - self.label1.width/2, touch.y - self.label1.height/2)

    def on_touch_move(self, touch):
        self.label1.pos = (touch.x - self.label1.width/2, touch.y - self.label1.height/2)

    def on_touch_up(self, touch):
        print("Uživatel pustil tlačítko")

class MainApp(App):

    def build(self):
        return MujWidget()

MainApp().run()
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Nyní můžeme náš Label přesouvat myší po okně aplikace:

Přesouvání Labelu myší nebo dotekem v Kivy frameworku pro Python

Než se pustíme do samotné aplikace Malování, ukážeme si grafiku v Kivy.

Grafika v Kivy

V Kivy frameworku se kreslí na canvas, který má každý widget nebo layout. Pokud bychom chtěli kreslit do hlavního layoutu, v Pythonu použijeme funkci self.canvas.add(), např. takto:

self.canvas.add((Rectangle(pos=(x, y), size=(x, y))))

My si to však ukážeme v Kivy language na jednoduchém příkladu. Nejdříve si vytvoříme prázdný widget a třídu App, která tento prázdný widget vrací:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.app import App

class MujWidget(Widget):
    pass

class KresleniPrikladApp(App):

    def build(self):
        return MujWidget()

KresleniPrikladApp().run()

V návrhu GUI, tedy souboru .kv, do canvasu vložíme Rectangle, obdélník, kterému nastavíme velikost a pozici. Následující soubor pojmenujeme jako kreslenipriklad.kv, jelikož třída se jmenuje KresleniPrikladApp a již jsme si říkali, že .kv soubor by se měl jmenovat stejně. Obsah souboru bude následující:

#:kivy 1.10.1

<MujWidget>:
    canvas:
        Rectangle:
            size: 100, 100
            pos: root.center_x - 50, root.center_y - 50

Zobrazí se nám čtverec uprostřed okna.

Kreslení na canvas v Kivy frameworku pro Python

Nyní změníme barvu čtverce přidáním Color před Rectangle:

#:kivy 1.10.1

<MujWidget>:
    canvas:
        Color:
            rgba: .2, .4, .7, 1
        Rectangle:
            size: 100, 100
            pos: root.center_x - 50, root.center_y - 50

Čtverec už nemá bílou barvu, ale má jeden z odstínů modré.

Barvy v Kivy frameworku pro Python

Nyní se můžeme vrhnou na samotnou aplikaci Malování.

Aplikace Malování

Jako první si vytvoříme Widget, kterému přidáme reakci na kliknutí a pohyb, abychom mohli malovat. Musíme si také importovat Line, při posunu myši budeme přidávat body do naší čáry a tu budeme ukládat do touch.ud, což je úložiště, kam si můžeme uložit libovolná data související s dotekem:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.graphics import Line
from kivy.app import App

class MujWidget(Widget):

    def on_touch_down(self, touch):
        touch.ud["line"] = Line(points=(touch.x, touch.y))
        self.canvas.add(touch.ud["line"])

    def on_touch_move(self, touch):
        touch.ud['line'].points += [touch.x, touch.y]

    def on_touch_up(self, touch):
        print("Uživatel pustil tlačítko")

class MainApp(App):

    def build(self):
        return MujWidget()

MainApp().run()

A máme hotovo, tahem myši můžeme kreslit!

Kreslení myší nebo prstem v Kivy frameworku pro Python

Zdrojový kód najdete ke stažení v příloze článku. V příští lekci, Aplikace Čtečka Knih v Kivy a Pythonu, si vytvoříme aplikaci Čtečka knih. Využijeme ScreenManager, který nám dovoluje knihy přepínat dle libosti.


 

Stáhnout

Staženo 12x (1.49 kB)
Aplikace je včetně zdrojových kódů v jazyce Python

 

 

Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!