2013-09-25 37 views

Trả lời

20

Đây là một điều khó khăn. Theo như tôi quan tâm, Widgets luôn là hình chữ nhật. Nhưng chúng tôi có thể thay đổi nền và đặt một vài hình ảnh cho trạng thái bình thường và xuống bằng cách sử dụng các thuộc tính background_normalbackground_down tương ứng. Ngoài ra, bạn sẽ cần phải hiểu thuộc tính border.

Với hai hình ảnh này được gọi là normal.pngdown.png, bạn có thể bắt đầu thêm đường viền tròn của mình.

enter image description hereenter image description here

Dưới đây là đoạn mã, mà là rất thẳng về phía trước (Tôi cố gắng giải thích border thuộc tính bên dưới):

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

Con đường tôi hiểu điều này (và tôi có thể sai) là cái này. Các giá trị trong border: 30,30,30,30 cho biết có bao nhiêu điểm ảnh ở trên cùng, bên phải, phía dưới và bên trái sẽ được sử dụng cho đường viền của nút nền. Phần còn lại sẽ được lấp đầy với phần giữa. Tôi không chắc chắn ở đây. Nhân tiện, nếu bạn muốn thấy một cái gì đó mát mẻ, xem ví dụ border: 150,150,150,150. Lý do là chúng tôi đang chọn một biên giới lớn hơn hình ảnh thực tế.

Thông báo trước: Tiện ích vẫn là hình chữ nhật. Điều đó có nghĩa là ngay cả khi bạn nhấp vào các góc tròn, nút vẫn nhận được sự kiện. Tôi đoán đó là một mức giá hợp lý. Nếu bạn muốn làm một cái gì đó tốt hơn, có lẽ tôi có thể giúp bạn nhưng chúng tôi sẽ cần phải sử dụng một số toán học để va chạm các điểm. Một trong những thủ thuật với Pong Game tutorial trong tài liệu là quả bóng là hình vuông. Tôi đã đăng câu hỏi có liên quan

+2

cho va chạm tùy chỉnh có ví dụ tại https://github.com/kivy/kivy/blob/master/examples/widgets /customcollide.py. Các nút sử dụng Border Image để hiển thị hình ảnh của nó có thuộc tính border. Hình ảnh Border này khá giống với chức năng của CSS BorderImage. Bạn có thể có ý tưởng hay từ đây http://css-tricks.com/understanding-border-image/ –

1

Nếu bạn chỉ tìm kiếm vẻ đẹp và không cầu kỳ về các góc, dù được làm tròn, vẫn là điểm tiếp xúc, bạn có thể làm điều đó một cách đơn giản , như được hiển thị trong chương trình mẫu này (Điều này có bán kính lớn cho mẫu này):

from kivy.uix.button import Button 
from kivy.lang import Builder 
from kivy.base import runTouchApp 

kv=""" 
<[email protected]>: 
    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!"))