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

Question

我想画弧线。 android.

中 canvas 两点之间的相当宽的圆弧

当然，我在这里进行了详尽的搜索，发现有几个人在问同样的问题 (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);
}

唉，其中的数学超出了我的范围，但我设法 copy/paste 将其转化为代码，并且它确实产生了一个弧线（正如您在 image 中看到的那样）。

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

为什么还有一条直线被封闭的区域填满了？我只需要一条曲线，而不是圆顶。我认为那是 drawArc() 中的 false 所做的，但它已关闭并且似乎没有这样做。
虽然圆弧的上角位置正确，但我还放置（并超级三重检查）下点位于蓝色元素的边缘，而不是屏幕底部。然而，弧角还在。
一个非常重要的部分是我需要不同的弧形，在中间有更多的凸起。真的，我需要能够以编程方式调整那个凸起，所以我需要它以某种方式作为变量传递给那个函数。

就是这样，我一直在努力，但没有研究过这个数学并且感到困惑。非常感谢您的解决方案。

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 函数也有边界矩形参数，但没有角度）

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 度的示例：

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

Wider arc connecting two points in android gaphics

math

graphics

android

curve

trigonometry