连接android图形中两点的更宽的弧

Question

我想画一条弧线。 android 画布上两点之间相当宽的圆弧。

当然，我在这里彻底搜索，发现有几个人在问同一个问题（such as），但尽我所能，我无法对答案做出正面或反面，也无法获得 drawArc 功能做我需要做的事！

然后我终于找到了detailed breakdown 的具体方法。

private static void arcBetween(PointF e1, PointF e2, Paint paint, Canvas canvas) {

    float a1Degrees = 36.0f;
    double a1 = Math.toRadians(a1Degrees);
    // l1 is half the length of the line from e1 to e2
    double dx = e2.x - e1.x, dy = e2.y - e1.y;
    double l = Math.sqrt((dx * dx) + (dy * dy));
    double l1 = l / 2.0;
    // h is length of the line from the middle of the connecting line to the
    //  center of the circle.
    double h = l1 / (Math.tan(a1 / 2.0));

    // r is the radius of the circle
    double r = l1 / (Math.sin(a1 / 2.0));
    // a2 is the angle at which L intersects the x axis
    double a2 = Math.atan2(dy, dx);
    // a3 is the angle at which H intersects the x axis
    double a3 = (Math.PI / 2.0) - a2;
    // m is the midpoint of the line from e1 to e2
    double mX = (e1.x + e2.x) / 2.0;
    double mY = (e1.y + e2.y) / 2.0;

    // c is the the center of the circle
    double cY = mY + (h * Math.sin(a3));
    double cX = mX - (h * Math.cos(a3));
    // rect is the square RectF that bounds the "oval"
    RectF oval =
            new RectF((float) (cX - r), (float) (cY - r), (float) (cX + r), (float) (cY + r));
    // a4 is the starting sweep angle
    double rawA4 = Math.atan2(e1.y - cY, e1.x - cX);
    float a4 = (float) Math.toDegrees(rawA4);

    canvas.drawArc(oval, a4, a1Degrees, false, paint);
}

唉，其中的数学运算超出了我的能力范围，但我设法将其复制/粘贴到代码中，并且它确实产生了弧线（如您在 image 中所见）。

但是，就我的目的而言，这条弧线存在三个问题。

1. 为什么还有一条填充了封闭区域的直线？我只需要一条曲线，而不是圆顶。我以为 drawArc() 中的 false 就是这样做的，但它已关闭并且似乎没有这样做。

2. 虽然弧的上角位于正确的位置，但我还放置（并超级三重检查）下点位于蓝色元素的边缘，而不是底部屏幕。然而，圆弧的一角仍然存在。

3. 不过，一个非常重要的部分是我需要将圆弧做成不同的形状，以便在中间有更多的凸起。真的，我需要能够以编程方式调整那个凸起，所以我需要它以某种方式作为变量传递给那个函数。

就是这样，我一直在尝试，但还没有研究过这个数学，很困惑。非常感谢您的解决方案。

Answer 1

您的false' parameter正在响应从圆弧末端到圆心的半径线。
删除填充 - 设置

 paint.setStyle(Paint.Style.STROKE);

您的计算似乎在 a2、a3 确定之前 - 很容易错过这些角度及其符号的错误，因此中心可能是错误的。我更喜欢矢量方法。你已经有了方向向量(dx, dy)。做一个标准化的

udx = dx / l
udy = dy / l

在左手坐标系中垂直于该向量（Y 轴向下）

px = udy
py = -udx

现在圆心

cx = mx + px * h
cy = my + py * h

我没有 Android 设备和 Java，但在 Windows 中快速检查显示正确的绘图（在我的情况下，Arc 函数也有边界 rect 参数，但没有角度）

var
  e1, e2: TPoint;
  a1degrees, a1, a2, a3, a4, dx, dy, l, l1, h, mx, my, udx, udy, px, py: Double;
  r, cx, cy: Integer;
  rct: TRect;
begin
    e1 := Point(300, 100);
    e2 := Point(200, 200);
    Canvas.Brush.Color := clLime;
    Canvas.Ellipse(e1.X - 3, e1.Y - 3, e1.X + 4, e1.Y + 4);
    Canvas.Ellipse(e2.X - 3, e2.Y - 3, e2.X + 4, e2.Y + 4);
    a1Degrees := 36;
    a1 := DegToRad(a1Degrees);
    dx := e2.x - e1.x;
    dy := e2.y - e1.y;
    mx := (e2.x + e1.x) / 2;
    my := (e2.y + e1.y) / 2;
    l := Sqrt((dx * dx) + (dy * dy));
    l1 := l / 2.0;
    // h is length of the line from the middle of the connecting line to the
    //  center of the circle.
    h := l1 / tan(a1 / 2.0);
    // r is the radius of the circle
    r := Round(l1 / sin(a1 / 2.0));

    udx := dx / l;
    udy := dy / l;
    px := udy;  // for right-handed coordinate system
    py := -udx; // inverse signs
    cx := Round(mx + px * h);
    cy := Round(my + py * h);

    Canvas.Brush.Color := clRed;   //draw center red
    Canvas.Ellipse(cx - 5, cy - 5, cx + 6, cy + 6);

    Canvas.Arc(cX - r, cY - r, cX + r, cY + r, e1.X, e1.Y, e2.X, e2.Y);

弧角 36、120 和 270 度的示例：