問(wèn)題描述

我想用 kivy 和 python 制作一個(gè)簡(jiǎn)單的圓形進(jìn)度條.我搜索了在線文檔和 GitHub 曲目，但沒(méi)有找到解釋循環(huán)進(jìn)度條概念的合適示例.

I thought to make one simple circular progress bar using kivy and python. I searched online documentation and GitHub repertoires, but not found single proper example explaining the concept of circular progress bar .

如下圖所示.我想發(fā)展.請(qǐng)任何人幫助我解決這個(gè)問(wèn)題.

Like the image attached below. I thought to develop. Please anyone help me in this issue.

推薦答案

新的更好的版本

這篇文章受到的關(guān)注比我預(yù)期的要多，因此我決定花一點(diǎn)精力來(lái)創(chuàng)建這個(gè)小部件的升級(jí)版本.現(xiàn)在可以在 GitHub 上找到它.這是一個(gè)可以用它做什么的示例(進(jìn)度條實(shí)際上是透明的，我在 gif 中添加了黑色背景以使所有內(nèi)容都可見(jiàn)):

New, better version

This post has received much more attention than I expected, therefore I've decided to put a little bit of effort into creating an upgraded version of this widget. It is now available on GitHub. Here is a sample of what can be done with it (the progress bars are actually transparent, I have added a black background to the gif to make everything visible):

如果有人感興趣，我將保留舊帖子以供參考.

I will keep the old post for reference below, if anyone is interested.

我制作了一個(gè)小部件來(lái)代表您想要實(shí)現(xiàn)的目標(biāo).但是，確切地說(shuō)，有一些限制:

I've made a widget to represent what you want to achieve. There are some limitations however, precisely:

1. 您需要調(diào)用 set_value 方法，而不是僅僅使用 .value 設(shè)置進(jìn)度條值.我非常不確定應(yīng)該做些什么來(lái)實(shí)現(xiàn)與原始 ProgressBar 類中相同的行為；

1. Instead of just setting the progress bar value using .value, you need to call the set_value method. I am very unsure what should be done to achieve the same behaviour as in original ProgressBar class;

你必須指定大小才能實(shí)現(xiàn)圓形，因?yàn)閷?duì)象本身就是一個(gè)橢圓.

You have to specify the size to achieve a circle, because the object itself is an ellipse.

這里是代碼，還有示例用法:

Here is the code, also with example usage:

from kivy.app import App
from kivy.uix.progressbar import ProgressBar
from kivy.core.text import Label as CoreLabel
from kivy.lang.builder import Builder
from kivy.graphics import Color, Ellipse, Rectangle
from kivy.clock import Clock


class CircularProgressBar(ProgressBar):

    def __init__(self, **kwargs):
        super(CircularProgressBar, self).__init__(**kwargs)

        # Set constant for the bar thickness
        self.thickness = 40

        # Create a direct text representation
        self.label = CoreLabel(text="0%", font_size=self.thickness)

        # Initialise the texture_size variable
        self.texture_size = None

        # Refresh the text
        self.refresh_text()

        # Redraw on innit
        self.draw()

    def draw(self):

        with self.canvas:
            
            # Empty canvas instructions
            self.canvas.clear()

            # Draw no-progress circle
            Color(0.26, 0.26, 0.26)
            Ellipse(pos=self.pos, size=self.size)

            # Draw progress circle, small hack if there is no progress (angle_end = 0 results in full progress)
            Color(1, 0, 0)
            Ellipse(pos=self.pos, size=self.size,
                    angle_end=(0.001 if self.value_normalized == 0 else self.value_normalized*360))

            # Draw the inner circle (colour should be equal to the background)
            Color(0, 0, 0)
            Ellipse(pos=(self.pos[0] + self.thickness / 2, self.pos[1] + self.thickness / 2),
                    size=(self.size[0] - self.thickness, self.size[1] - self.thickness))

            # Center and draw the progress text
            Color(1, 1, 1, 1)
            #added pos[0]and pos[1] for centralizing label text whenever pos_hint is set
            Rectangle(texture=self.label.texture, size=self.texture_size,
                  pos=(self.size[0] / 2 - self.texture_size[0] / 2 + self.pos[0], self.size[1] / 2 - self.texture_size[1] / 2 + self.pos[1]))


    def refresh_text(self):
        # Render the label
        self.label.refresh()

        # Set the texture size each refresh
        self.texture_size = list(self.label.texture.size)

    def set_value(self, value):
        # Update the progress bar value
        self.value = value

        # Update textual value and refresh the texture
        self.label.text = str(int(self.value_normalized*100)) + "%"
        self.refresh_text()

        # Draw all the elements
        self.draw()


class Main(App):

    # Simple animation to show the circular progress bar in action
    def animate(self, dt):
        if self.root.value < 80:
            self.root.set_value(self.root.value + 1)
        else:
            self.root.set_value(0)

    # Simple layout for easy example
    def build(self):
        container = Builder.load_string(
            '''CircularProgressBar:
    size_hint: (None, None)
    height: 200
    width: 200
    max: 80''')

        # Animate the progress bar
        Clock.schedule_interval(self.animate, 0.1)
        return container


if __name__ == '__main__':
    Main().run()

輸出:

這篇關(guān)于如何在kivy中制作圓形進(jìn)度條?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！