自定义视图 - 由线条绘制的圆角矩形的角

debugcn 发表于 Dev

多明

我正在使用自定义视图，我想使用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()and来画这个path.arcTo()。

根据 Docs about arcTo()：

将指定的圆弧作为新轮廓附加到路径中。如果路径的起点与路径的当前最后一个点不同，则添加自动 lineTo() 以将当前轮廓连接到圆弧的起点。但是，如果路径为空，则我们使用圆弧的第一个点调用 moveTo()。

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

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

那么我的弧应该从这个点开始（0，高度 - 曲线），但是当arcTo()有以下参数时我在哪里传递这些参数：arcTo (float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)？

另外我怎么在这种情况下计算startAngle和sweepAngle？

提前致谢！

恩特莱科

绘制圆弧时，您需要指定该圆弧的完整边界框，以及起点和扫掠角。我尝试从视觉上看到它们，如下所示：

例如，当顺时针方向时，起始角位于距原点 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)
    }

结果将是这样的：