如何从一侧切圆

Question

您好我正在尝试使用画布创建Circle，如下图所示。

但现在我只能跟随这样做了。

我不明白我该怎么做。我需要从一侧切割圆圈，只需要填充圆圈边框。

这是我的代码供审核。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // Clear canvas
    canvas.drawColor(Color.TRANSPARENT);

    // Draw Ticks and colored arc
    drawTicks(canvas);
}

private void drawTicks(Canvas canvas) {
    float availableAngle = 160;
    float majorStep = (float) (majorTickStep/ maxSpeed *availableAngle);

    float majorTicksLength = 30;

    RectF oval = getOval(canvas, 1);
    float radius = oval.width()*0.35f;

    float currentAngle = 10;
    double curProgress = 0;
    while (currentAngle <= 170) {

        if (labelConverter != null) {

            canvas.save();
            canvas.rotate(180 + currentAngle, oval.centerX(), oval.centerY());
            float txtX = oval.centerX() + radius + majorTicksLength/2 + 8;
            float txtY = oval.centerY();
            canvas.rotate(+90, txtX, txtY);
            //canvas.drawText(labelConverter.getLabelFor(curProgress, maxSpeed), txtX, txtY, txtPaint);
            canvas.restore();
        }

        currentAngle += majorStep;
        curProgress += majorTickStep;
    }

    RectF smallOval = getOval(canvas, 0.7f);
    colorLinePaint.setColor(defaultColor);
    //canvas.drawArc(smallOval, 185, 170, false, colorLinePaint);

    canvas.drawCircle(250, 210, 180, colorLinePaint);

    for (ColoredRange range: ranges) {
        colorLinePaint.setColor(range.getColor());
        //canvas.drawArc(smallOval, (float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), false, colorLinePaint);
        //canvas.drawArc(smallOval, (float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), false, colorLinePaint);
        //canvas.drawCircle((float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), 100, colorLinePaint);
        //canvas.drawCircle((float)(300 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), 180, colorLinePaint);
    }
}

private RectF getOval(Canvas canvas, float factor) {
    RectF oval;
    final int canvasWidth = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
    final int canvasHeight = canvas.getHeight() - getPaddingTop() - getPaddingBottom();

    if (canvasHeight*2 >= canvasWidth) {
        oval = new RectF(0, 0, canvasWidth*factor, canvasWidth*factor);
    } else {
        oval = new RectF(0, 0, canvasHeight*2*factor, canvasHeight*2*factor);
    }

    oval.offset((canvasWidth-oval.width())/2 + getPaddingLeft(), (canvasHeight*2-oval.height())/2 + getPaddingTop());

    return oval;
}

真的被困在这上面了。请给我任何提示或参考。

Answer 1

我为你创建了一个视图..它可能有所帮助......只是试一试......它只是一个基本视图......我认为它会给出一个想法......

package abbitfoot.likhil.customeprogressbar;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ProgressBar;

public class CustomeView extends View {

Paint red=new Paint();
Paint white=new Paint();
Paint bg=new Paint();
int radiusBg=200;

public CustomeView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
    init();
}

private void  init(){
    red.setColor(Color.RED);
    white.setColor(Color.WHITE);
    bg.setColor(Color.rgb(0x99, 0x99, 0x99));
}

@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    canvas.save();

    canvas.drawCircle(getWidth()/2, getHeight()/2, radiusBg, bg);

    Rect oval=new Rect(getWidth()/2-radiusBg+10, getHeight()/2-radiusBg+10,getWidth()/2+radiusBg-10,getHeight()/2+radiusBg-10 );
    RectF rectF=new RectF(oval);

    canvas.drawArc(rectF, 140,200,true, red);
    canvas.drawArc(rectF, 340,60,true, white);

    canvas.drawCircle(getWidth()/2, getHeight()/2, radiusBg-25, bg);

    canvas.restore();

}

}

希望这会对你有所帮助......对不起，我认为这不是一种正确的方法..