Нарисуйте полуовальную форму в android

Question

Я пытаюсь нарисовать ар c в android, между двумя textView, используя drawAr c. Мое требование состоит в том, чтобы получить ar c, как показано на рисунке , который является правильной формой ar c. Но когда я попробовал, я не получил идеальную форму ar c, и я получил ar c, который имеет полуовальную форму .

Вот мой код фрагмент:

public class ArcView extends View {

    final RectF oval = new RectF();
    Path myPath = new Path();
    Paint paint;
    float left, top, right, bottom;

    public FlightStatusArcView(Context context) {
        super(context);
    }
    public FlightStatusArcView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }
    public FlightStatusArcView(Context context, AttributeSet attrs, int defStyleAttr)     {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet set) {
        if (set == null)
            return;
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    public void setArcProperties(float l, float t, float r, float b) {
        left = l;
        top = t;
        right = r;
        bottom = b;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        oval.set(left, top, right, bottom);
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5f);

        canvas.drawArc(oval, 180f, 180f, false, paint);
        drawArrow(canvas);
    }



    private void drawArrow(Canvas canvas) {

        canvas.save();

        Paint p = new Paint();
        p.setColor(Color.WHITE);
        p.setStyle(Paint.Style.FILL);
        p.setStrokeWidth(4f);

        float startX = oval.left + 20;
        float startY = oval.top + (oval.centerY() - oval.top)/ 2;

        Path path = new Path();
        path.moveTo(startX, startY-20);
        path.lineTo(startX + 20, startY + 20);
        path.lineTo(startX + 30, startY -17);
        path.close();
        canvas.drawPath(path, p);
        canvas.restore();
    }


}

Пожалуйста, помогите, как достичь идеальной формы ar c, используя холст apis.

Answer 1

Вы можете использовать Path вместе с quadTo или cubicTo, чтобы нарисовать такую ​​кривую. Это позволит вам нарисовать кривые Безье с квадратичностью c или куби c. Например, кривая Безье куби c с двумя одинаковыми контрольными точками (x2, y2) построена так:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(5f);

    Path p = new Path();

    float x1 = 100;
    float y1 = 256;

    float x2 = 400;
    float y2 = 32;

    float x3 = 700;
    float y3 = 256;

    p.moveTo(x1, y1);

    p.cubicTo(x2, y2, x2, y2, x3, y3);
    canvas.drawPath(p, paint);
    drawArrow(canvas);
}

Это результат:

Более подробную информацию о cubicTo и quadTo можно найти в официальной документации