如何在Codename One中制作一个圆形进度条？

Question

我想创建一个圆形进度条，以百分比的形式显示当前状态。就像这样：

现在我已经按照创建扁平进度条的说明进行了操作，但由于我不熟悉swing和没有任何关于Java图形的线索，我不知道如何从“扁平”进度条转换为“圆形”进度条。

类似进度条的代码应该是什么样子？

备注：我看到了Hannah的 analong clock 帖子，并尝试了这个方法-但由于我缺乏绘画技巧(也许是数学),所以失败了。

备注2：我根本不使用GUIBuilder(裸骨)

备注3：如果可能的话，我希望它是绘制出来的，而不是基于图像的。

- Do Re

Answer 1

我还没有测试过，但像这样的东西应该可以工作：

Container progress = new Container(new LayeredLayout());
Label percent = new Label("0%");
percent.getUnselectedStyle().setAlignment(Component.CENTER);
progress.add(new Label(progressOverlayImage, "Container")).
        add(FlowLayout.encloseCenterMiddle(percent));
progress.getUnselectedStyle().setBgPainter((Graphics g, Rectangle rect) -> {
    g.setColor(0xff0000);
    g.fillArc(progress.getX(), progress.getY(), progressOverlayImage.getWidth(), progressOverlayImage.getHeight(), 0, currentProgress360);
});

要使其工作，您需要以下内容。

• 更改进度值时，您需要更新百分比标签
• 您需要一个“覆盖图像”，在其中您希望显示进度的位置是透明的
• 您需要一个名为currentProgress360的变量，表示0到360之间进度的当前状态

- Shai Almog

---

它“有点工作”。我该如何使progressOverlayImage缩放？进度本身是一个椭圆形，但我需要一个圆形...怎么办？ - Do Re

我刚刚发现另一个问题：您的解决方案填充了与我想要填充的完全相反的部分；我想要填充弧形，但它目前填充的是除弧形以外的所有内容 - 或者我输入了错误的图像？意思是：我需要将显示圆形弧线的图像作为progressOverlayImage，还是应该使用显示边缘并保留弧线开放的图像？ - Do Re

我已将弧线修复为绘制图像的尺寸大小。您的图像只需要在希望填充弧线的区域透明，所以它可能与我所说的相反。 - Shai Almog