android - 自定义 View - 由线条绘制的圆角矩形的角

Question

我正在玩自定义 View ，我想使用 path.lineTo() 和 path.arcTo() 方法构建一个圆角矩形。
所以，我想要得到的矩形:

通常我用这段代码画这个:

    RectF backReftf = new RectF();
    Path path = new Path();
    int width = getWidth();
    int height = getHeight();
    float curve = (float) (0.1 *  height);
    RectF backReftf = new RectF();
    backReftf.left = 0;
    backReftf.top = 0;
    backReftf.right = width;
    backReftf.bottom = height;
    path.addRoundRect(backReftf, curve, curve, Path.Direction.CW);
    canvas.drawPath(path, paint);

但我想用 path.lineTo() 和 path.arcTo() 来绘制它。

根据有关 arcTo() 的文档:

Append the specified arc to the path as a new contour. If the start of the path is different from the path's current last point, then an automatic lineTo() is added to connect the current contour to the start of the arc. However, if the path is empty, then we call moveTo() with the first point of the arc.

所以理论上我的圆弧应该从那里开始，线结束的地方，所以如果我画一条线(矩形的左侧):

    float curve = (float) (0.1 *  height);
    path.moveTo(0,0);
    path.lineTo(0, height - curve);

然后我的弧线应该从这个点开始(0，高度 - 曲线)，但是当 arcTo() 有以下参数时我应该把这些参数传递到哪里:arcTo (float left,
浮顶，
向右浮动，
浮底，
float 起始角度，
float 扫描角度，
bool forceMoveTo)？

此外，在这种情况下我该如何计算 startAngle 和 sweepAngle？

提前致谢!

Answer 1

绘制弧线时，您需要指定该弧线的完整边界框，以及起始角和扫描角。我尝试通过视觉方式查看它们，如下所示:

例如顺时针方向时，起始角位于距原点 180 度的位置。从 startAngle 开始，如果顺时针旋转 90 度，您将到达所需的结束位置。

注意原点、startAngle 和 sweepAngle 在此图形中的位置。在 Kotlin 中，它看起来像这样:

// Given some radius, viewWidth and viewHeight
override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        path.apply {
            moveTo(radius, 0F)
            lineTo(viewWidth - radius, 0F)
            arcTo(viewWidth - 2 * radius, 0F, viewWidth, 2 * radius, -90F, 90F, false)
            lineTo(viewWidth, radius)
            arcTo(viewWidth - 2 * radius, viewHeight - 2 * radius, viewWidth, viewHeight, 0F, 90F, false)
            lineTo(radius, viewHeight)
            arcTo(0F, viewHeight - 2 * radius, 2 * radius, viewHeight, 90F, 90F, false)
            lineTo(0F, radius)
            arcTo(0F, 0F, 2 * radius, 2 * radius, 180F, 90F, false)
        }

        canvas?.drawPath(path, linePaint)
    }

结果会是这样的: