Python+Kivy 備忘録 Canvas 座標系とマウスクリック編

 先日、今年の抱負で「緊急事態宣言中にＭＯのスケルトンを作るぞー」とは書いたのですが…

思ったよりも早く宣言しちゃいましたね。

そんなわけで、急ピッチで基礎固めをしないとならないのですよ…というわけで。

本プログラムは、クリックを「押した」場所に赤い楕円、「放した」場所に青い楕円を描画するプログラムです。

コード

from kivy.app import App

from kivy.uix.widget import Widget

from kivy.graphics import Color, Ellipse, Line, Rectangle

from kivy.core.window import Window

class ClickInput(Widget):

    def draw_ellipse(self,x,y,r,g,b):

        with self.canvas:

            Color(r,g,b)

            w=self.size[0]

            h=self.size[1]

            Ellipse(pos=(x-w/20,y-h/20),size=(w/10,h/10))

    def on_touch_down(self,touch):

        self.draw_ellipse(touch.pos[0],touch.pos[1],1,0,0)

        print("D:",touch)

    def on_touch_up(self,touch):

        self.draw_ellipse(touch.pos[0],touch.pos[1],0,0,1)

        print("U:",touch)

class InitKivy(App):

    def build(self):

        return ClickInput()

if __name__ == "__main__":

    InitKivy().run()

まず kivy のクライアント領域…というか描画領域、windows で言う所の DC （デバイスコンテキスト：因みにプリンターとかも持っているのでモニターとは限らない）みたいな物は Canvas と言うらしいですね。

この座標系ですが、左下が基点で（０，０）になるそうです。

on_touch_down と on_touch_up はマウスクリックの押下、開放イベントのオーバーライド関数…マウスクリックの押下、開放時についでで呼んでもらう関数です。

で、ここで print している内容ですが

spos は相対座標で、左下を（０．０、０．０）右上を（１．０，１．０）とした実数型。

pos は実際のドット数を示す環境依存でやっぱり左下が０で右上が幅と高さのドット数となります（稀に小数点以下に９９９９…と続く事がありますが）。異なる環境間でやりとりをするなら相対座標、クライアントに描画するなら実座標を使用する事になるでしょう。

draw_ellipse 関数は楕円を描く処理をひとまとめにしたものです。

画面全体の幅と高さに対して１０分の１のサイズで描画しているのですが…。

この Ellipse 関数は楕円であるにも関わらず、基本座標が左下なので、クリックした場所を中心にしたい場合は座標に対して、半径分を引いてやらないといけません。恐らく他の描画命令と歩調を合わせた結果でしょうけど、少し面倒ですね。

尚、機種依存の Canvas の幅と高さのドット数は self.size[0] self.size[1] から取得しています。

描画する楕円の大きさは Canvas の幅と高さ依存なので、ウィンドウの大きさを変えながらクリックする事で、いろんな大きさの円を描きます。

というわけで、クライアントの方の描画処理の練習をしてみました。

次はサーバー側かなあ。あと Python を使ったルート計算や時間の算出など細かい所も解らない事があるので、完成が「１か月後」と言われる宣言解除に間に合うかは微妙ですねえ。