button - Kivyでボタンの角を丸くする

Question

Kivyでボタンの角を丸くするための推奨される方法は何ですか?

このタスクを実行するための他の同様に実行可能な方法はありますか?

Answer 1

これはトリッキーです。私に関する限り、Widgets常に長方形です。background_normalしかし、背景を変更し、それぞれおよびbackground_downプロパティを使用して通常状態と停止状態の画像をいくつか配置できます。また、プロパティを理解する必要がありborderます。

normal.pngとというこの 2 つの画像を使用down.pngして、丸い境界線の追加を開始できます。

これは非常に簡単なコードです（border以下のプロパティを説明しようとしています）：

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()

私がこれを理解する方法（そして私が間違っているかもしれません）はこれです。の値border: 30,30,30,30は、背景のボタンの境界線に使用される上、右、下、左のピクセル数を示します。残りは真ん中で埋めていきます。ここでよくわかりません。ところで、かっこいいものを見たいなら、たとえば を見てくださいborder: 150,150,150,150。その理由は、実際の画像よりも大きな境界線を拾っているためです。

警告:ウィジェットは依然として長方形です。つまり、丸みを帯びた角をクリックしても、ボタンは引き続きイベントを受け取ります。適正価格かと思います。より良いことをしたい場合は、私がお手伝いできるかもしれませんが、ポイントを衝突させるためにいくつかの数学を使用する必要があります. ドキュメントのPong Game チュートリアルのトリックの 1 つは、実際にはボールが正方形であることです。ここに関連する質問を投稿しましたが、使用する必要がありますCanvas

Answer 2

キャンバスアイテムを使った自作教室はいかがですか？

レイアウトごとに半径を変更できます。

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import *

root=Widget()

class RoundCorner(RelativeLayout):
    def __init__(self,r=50,**kwargs):
        super(RoundCorner, self).__init__(**kwargs)
        self.surf=FloatLayout(); self.add_widget(self.surf)
        with self.canvas:
            Color(.3,0,3,0.3)
            Rectangle(pos=[-r,0],size=[r,self.size[1]])
            Rectangle(pos=[0,-r],size=[self.size[0],self.size[1]+2*r])
            Rectangle(pos=[self.size[0],0],size=[r,self.size[1]])

            Color(0,.3,0,.5)
            Ellipse(pos=[-r,-r],size=[2*r,2*r])
            Ellipse(pos=[self.size[0]-r,-r],size=[2*r,2*r])
            Ellipse(pos=[-r,self.size[1]-r],size=[2*r,2*r])
            Ellipse(pos=[self.size[0]-r,self.size[1]-r],size=[2*r,2*r])

            Color(1,1,1,0.3)
            self.bg=Rectangle(size=self.size)

root.add_widget(RoundCorner(size=[300,400],pos=[320,100]))
root.add_widget(RoundCorner(size=[100,100],pos=[100,200]))

class MyApp(App):
    def __init__(self):
        super(MyApp, self).__init__()
    def build(self):
        return root

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

このことを書く方が簡単なので、相対レイアウトを選びました。キャンバス アイテムにグローバル ポジションを追加することでウィジェットに採用できますが、簡単にするためにそのように作成しました。そして、ロジックを可視化するためにこのように選択された色。上記のコードの例を次に示します。

コードを調整するだけColorで準備完了です。

解像度は問題ではないので、これはより良いです (私は間違っているかもしれません - 私は OpenGL の専門家ではありません)。

まあ、これは完全なボタンではありません。これは単なるレイアウトで、タッチダウンまたはプレスであり、実際のボタンのように使用できます。私はそれをコードに含めませんでした。公式サイトにはイベント情報が盛りだくさん。