How To Draw A Curved Line Between 2 Points On Canvas?

I have tried a lot of different approaches from examples around the web, but I can't seem to get this to work. I am trying to make a method that draws a curved line between 2 point

Solution 1:

I found a solution to my problem myself. Even though there were some great answers, they weren't an exact solution to my particular problem.

Here is what I did:

• Found the point in between the 2 given points
• Calculated the angle 90 degrees between the 2 points
• Calculated the point X pixels from the middle point using the calculated degree from before.
• Used "path.cubicTo" with these 3 points (Takes both negative and positive values to determine which way the line should curve).

Here is my code if anyone else should run into the same problem:

public OverlayBuilder drawCurvedArrow(int x1, int y1, int x2, int y2, int curveRadius, int color, int lineWidth) {

    Paintpaint=newPaint();
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(lineWidth);
    paint.setColor(ContextCompat.getColor(context, color));

    finalPathpath=newPath();
    intmidX= x1 + ((x2 - x1) / 2);
    intmidY= y1 + ((y2 - y1) / 2);
    floatxDiff= midX - x1;
    floatyDiff= midY - y1;
    doubleangle= (Math.atan2(yDiff, xDiff) * (180 / Math.PI)) - 90;
    doubleangleRadians= Math.toRadians(angle);
    floatpointX= (float) (midX + curveRadius * Math.cos(angleRadians));
    floatpointY= (float) (midY + curveRadius * Math.sin(angleRadians));

    path.moveTo(x1, y1);
    path.cubicTo(x1,y1,pointX, pointY, x2, y2);
    canvas.drawPath(path, paint);

    returnthis;
}

And here is an example of how the implementation looks like:

Solution 2:

I think you are using wrong method for this purpose, one of the solutions that I can suggest is below

floatradius=20;
finalRectFoval=newRectF();
oval.set(point1.x - radius, point1.y - radius, point1.x + radius, point1.y+   radius);
PathmyPath=newPath();
myPath.arcTo(oval, startAngle, -(float) sweepAngle, true);

and for calculation of startAngle you will need

int startAngle = (int) (180 / Math.PI * Math.atan2(point.y - point1.y, point.x - point1.x));

for sweepAngle you can find detailed description here.

Solution 3:

Suppose you have two points mPoint1 and mPoint2

int w=canvas.getWidth();
int h=canvas.getHeight();
int w_2= (w / 2);
int h_2= (h / 2);
PointFmPoint1=newPointF(0, 0); //starts at canvas left topPointFmPoint2=newPointF(w_2, h_2);//mid of the canvasPathdrawPath1=drawCurve(mPoint1, mPoint2);
canvas.drawPath(drawPath1, paint);

Method to draw the line

private Path drawCurve(PointF mPointa, PointF mPointb) {
            PathmyPath=newPath();
            myPath.moveTo(mPointa.x, mPointa.y);
            finalfloatx2= (mPointb.x + mPointa.x) / 3;
            finalfloaty2= (mPointb.y + mPointa.y) / 3;
            myPath.quadTo(x2, y2, mPointb.x, mPointb.y);
            return myPath;
}