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
...