web-dev-qa-db-ja.com

kivyの丸みを帯びたボタンの角

Kivyのボタンの角を丸くするための好ましい方法は何ですか？

このタスクを実行する他の同様に実行可能な方法はありますか？ありがとうございました。

kivy
18
James_L

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

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

enter image description hereenter image description here

これが非常に単純なコードです（以下で 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 を使用する必要があります

24
toto_tico

見栄えだけを探していて、角が丸くても気にしない場合は、このサンプルプログラムに示すように、簡単に行うことができます（このサンプルでは半径が大きくなります）。

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!"))
5
RufusVS