android 百分比 圆饼,Android绘制2色圆圈（饼图）(Android draw circle with 2 colors (Pie chart))...

Android绘制2色圆圈(饼图)(Android draw circle with 2 colors (Pie chart))

这是我在stackoverflow.com的第一个问题，所以如果我做错了东西，请原谅我自己。

我想创建一个基本上像进度条的圆圈。 现在我想通过一些代码设置百分比。

我的问题：

无法找到有两种颜色的圆圈可以工作(一直在寻找几个小时的论坛，并找到类似于我的问题的解决方案，但我无法将这些解决方案实施到我的应用中，我已经阅读了很多关于画布的内容。 drawArc(...)，但似乎无法找出如何使用它)。

如何将画布放入布局？ (我有一个xml布局，画布应该在特定的布局内绘制，而不会改变布局的其余部分)。

谢谢。

This is my first question here at stackoverflow.com so excuse myself if i'm doing stuff wrong.

I want to create a circle which basically is like a progress bar. Now I'd like to set the percentage through some code.

My problems:

Can't get a circle with two colors to work (have been searching forums for hours and have found solutions to problems similar to mine but I just can't implement those solutions that into my app. I've read a lot about canvas.drawArc(...) but can't seem to find out how to use it).

How is it possible to put a canvas into a layout? (I've got a xml layout and the canvas should be drawn inside a particular layout without changing the rest of the layout).

Thanks.

原文：https://stackoverflow.com/questions/19731261

更新时间：2020-01-15 22:52

最满意答案

这只是一个提示。 它只是一个视图，它在同一矩形中绘制两个弧线：第一个弧线从角度0到360.第二个(在第一个之上)从0跨越到一个取决于百分比的角度。

public class PercentView extends View {

public PercentView (Context context) {

super(context);

init();

}

public PercentView (Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

public PercentView (Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

init();

}

private void init() {

paint = new Paint();

paint.setColor(getContext().getResources().getColor(R.color.lightblue));

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.FILL);

bgpaint = new Paint();

bgpaint.setColor(getContext().getResources().getColor(R.color.darkblue));

bgpaint.setAntiAlias(true);

bgpaint.setStyle(Paint.Style.FILL);

rect = new RectF();

}

Paint paint;

Paint bgpaint;

RectF rect;

float percentage = 0;

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//draw background circle anyway

int left = 0;

int width = getWidth();

int top = 0;

rect.set(left, top, left+width, top + width);

canvas.drawArc(rect, -90, 360, true, bgpaint);

if(percentage!=0) {

canvas.drawArc(rect, -90, (360*percentage), true, paint);

}

}

public void setPercentage(float percentage) {

this.percentage = percentage / 100;

invalidate();

}

}

添加到您的布局：

android:id="@+id/percentview"

android:layout_width="100dp"

android:layout_height="100dp" />

This is only a hint. It is simply a view that draw two arcs in the same rect: First arc spans from angle 0 to 360. The second one (above the first) spans from 0 to an angle that depends on the percentage.

public class PercentView extends View {

public PercentView (Context context) {

super(context);

init();

}

public PercentView (Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

public PercentView (Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

init();

}

private void init() {

paint = new Paint();

paint.setColor(getContext().getResources().getColor(R.color.lightblue));

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.FILL);

bgpaint = new Paint();

bgpaint.setColor(getContext().getResources().getColor(R.color.darkblue));

bgpaint.setAntiAlias(true);

bgpaint.setStyle(Paint.Style.FILL);

rect = new RectF();

}

Paint paint;

Paint bgpaint;

RectF rect;

float percentage = 0;

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//draw background circle anyway

int left = 0;

int width = getWidth();

int top = 0;

rect.set(left, top, left+width, top + width);

canvas.drawArc(rect, -90, 360, true, bgpaint);

if(percentage!=0) {

canvas.drawArc(rect, -90, (360*percentage), true, paint);

}

}

public void setPercentage(float percentage) {

this.percentage = percentage / 100;

invalidate();

}

}

Add to your layout:

android:id="@+id/percentview"

android:layout_width="100dp"

android:layout_height="100dp" />

2014-01-03

相关问答

您需要更改您的javascript以使用适当的旋转偏移在DOM中的适当位置创建div。 var setButti = function(n, p, f) {

var total = n + p + f;

var atrs = { 'tc-passed' : p*360/total, 'tc-failed' : f*360/total, 'tc-ne' : n*360/total };

var butti = $('#buttiEl');

...

LibGdx主要是一个图形API，并没有真正易于使用的库设置用于简单的图表/图形，主要是因为它很容易自己创建一个。 另一种技术可以为您的任务提供更好的选择。 话虽如此，要绘制2D圆圈，您可以轻松使用ShapeRenderer。 请参阅javadoc的链接和一些示例： https ：//libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html您还可以使用ShapeR

...

您可以像在饼图上制作标签一样。 //arc for 1st circle

var circleArc1 = d3.svg.arc()

.outerRadius(radius - 70)

.innerRadius(radius - 70);

//arc for 2nd circle

var circleArc2 = d3.svg.arc()

.outerRadius(radius - 100)

.innerRadius(radius - 100);

然后使用arc

...

这只是一个提示。 它只是一个视图，它在同一矩形中绘制两个弧线：第一个弧线从角度0到360.第二个(在第一个之上)从0跨越到一个取决于百分比的角度。 public class PercentView extends View {

public PercentView (Context context) {

super(context);

init();

}

public PercentView (Context context, Attrib

...

看起来你正在使用的中心点就是问题。 实际上，如果您查看UIView center属性的文档，您会发现： 中心在其超视图的坐标系内指定，并以点为单位进行测量。 您希望在其自己的坐标系中指定视图的中心点，而不是其超级视图的中心点。 您已经在此处确定了视图中心的坐标： CGPoint center = CGPointMake((bounds.size.width/2.0), (bounds.size.height/2.0));

因此，只需将您使用的点作为从self.center到center ，如下所

...

设置center ，例如： plotOptions: {

pie: {

borderColor: '#ffffff',

borderWidth: '4px',

innerSize: '60%',

size: '100%',

center: ['50%', '30%'], // set center

dataLabels: {

...

好吧，我认为这是我的最终onDraw方法，希望这有助于其他人 @Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

for (int i = 0; i < iDataSize; i++) {

if (i>=iColorListSize){

paintPieFill.setColor(Color.parseColor(

...

Core Plot是Mac OS X和iOS的绘图框架。 它提供数据的二维可视化，并且与核心动画，核心数据和可可绑定等Apple技术紧密集成。 Core Plot is a plotting framework for Mac OS X and iOS. It provides 2D visualization of data, and is tightly integrated with Apple technologies like Core Animation, Core Data, and

...

这是一种方式： 画出你的灰色背景。 用-Math.PI * 2(==“12 on a clock”)的起始角填充你的百分比弧，结束角为-Math.PI * 2 + Math.PI * 2 *％(==一个完整的2PI乘以所需百分比的圆圈)。 画出你的标志。 要进行动画处理，只需使用requestAnimationFrame循环，该循环逐步绘制百分比弧，从0％开始并以目标百分比结束。 示例代码和演示： var canvas=document.getElementById("canvas");

var

...

blackPaint ， whitePaint和文本的初始化： Paint blackPaint = new Paint();

Paint whitePaint = new Paint();

whitePaint.setColor(Color.WHITE);

whitePaint.setTextSize(40); // Adjust this as needed

String text = "16";

你可以在for循环后添加它： canvas.drawCircle(mOvals.center

...