Android 自定义视图 Path 圆圈部分答案

【问题标题】：Android custom view Path circle partAndroid 自定义视图 Path 圆圈部分
【发布时间】：2021-06-30 06:22:37
【问题描述】：

我一直在尝试创建自定义视图like this

我的代码

    Paint paint = new Paint();
    paint.setColor(Color.WHITE);
    paint.setStrokeWidth(6);
    float radius = getFloat(20);
    CornerPathEffect corEffect = new CornerPathEffect(radius);
    paint.setPathEffect(corEffect);
    Path path = new Path();
    path.reset();
    float top = getFloat(5);
    path.moveTo(0, top);
    float d = 80;
    path.lineTo((getWidth() - getFloat(d)) / 2, top);
    RectF oval = new RectF((getWidth() - getFloat(d)) / 2, top, (getWidth() + getFloat(d)) / 2, getFloat(d/2));
    path.arcTo(oval, 90, 360, false);

    path.lineTo((getWidth() + getFloat(d)) / 2, top);
    path.lineTo(getWidth(), top);
    path.lineTo(getWidth(), getHeight());
    path.lineTo(0, getHeight());
    path.close();

    paint.setShadowLayer(12, 0, 0, Color.argb(255, 200, 200, 200));
    setLayerType(LAYER_TYPE_SOFTWARE, paint);
    canvas.drawPath(path, paint);

and my result

如何让坑更圆like this？

【问题讨论】：

标签： java android path draw

【解决方案1】：

感谢费萨尔，我试试椭圆形

    Paint paint = new Paint();
    paint.setColor(Color.WHITE);
    paint.setStrokeWidth(6);
    float radius = getFloat(0);
    CornerPathEffect corEffect = new CornerPathEffect(radius);
    paint.setPathEffect(corEffect);
    Path path = new Path();
    path.reset();
    float top = getFloat(5);
    float round = getFloat(20);
    path.moveTo(0, getHeight());
    path.lineTo(0, round);
    path.cubicTo(0, top + round,
            0, top,
            round, top);

    float d = 80;
    path.lineTo(((getWidth() - getFloat(d)) / 2) - round, top);

    path.cubicTo(((getWidth() - getFloat(d)) / 2) - round, top,
            (getWidth() - getFloat(d)) / 2, top,
            (getWidth() - getFloat(d)) / 2, top + round);

    path.cubicTo((getWidth() - getFloat(d)) / 2, top,
            (getWidth() - getFloat(d)) / 2, getFloat(d/2),
            getWidth() / 2, getFloat(d/2));

    //-------------------

    path.cubicTo(getWidth() / 2, getFloat(d/2),
            (getWidth() + getFloat(d)) / 2, getFloat(d/2),
            (getWidth() + getFloat(d)) / 2, top);

    path.cubicTo((getWidth() + getFloat(d)) / 2, top + round,
            (getWidth() + getFloat(d)) / 2, top,
            ((getWidth() + getFloat(d)) / 2) + round, top);

    path.lineTo(((getWidth() + getFloat(d)) / 2) + round, top);
    path.lineTo(getWidth() - round, top);
    path.cubicTo(getWidth() - round, top,
            getWidth(), top,
            getWidth(), top + round);

    path.lineTo(getWidth(), getHeight());
    path.lineTo(0, getHeight());
    path.close();

    paint.setShadowLayer(12, 0, 0, Color.argb(255, 200, 200, 200));
    setLayerType(LAYER_TYPE_SOFTWARE, paint);
    canvas.drawPath(path, paint);

但我看到artefacts

我不明白错误在哪里

【讨论】：

【解决方案2】：

您可以使用 Path.cubicTo() 来实现您想要的。或者以对称方式使用 Path.ovalTo() 两次。

Path.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

【讨论】：