How to draw a curved line between 2 points on canvas?

前端 未结 3 767
借酒劲吻你
借酒劲吻你 2021-01-02 17:14

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

相关标签:
3条回答
  • 2021-01-02 17:47

    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) {
    
        Paint paint  = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(lineWidth);
        paint.setColor(ContextCompat.getColor(context, color));
    
        final Path path = new Path();
        int midX            = x1 + ((x2 - x1) / 2);
        int midY            = y1 + ((y2 - y1) / 2);
        float xDiff         = midX - x1;
        float yDiff         = midY - y1;
        double angle        = (Math.atan2(yDiff, xDiff) * (180 / Math.PI)) - 90;
        double angleRadians = Math.toRadians(angle);
        float pointX        = (float) (midX + curveRadius * Math.cos(angleRadians));
        float pointY        = (float) (midY + curveRadius * Math.sin(angleRadians));
    
        path.moveTo(x1, y1);
        path.cubicTo(x1,y1,pointX, pointY, x2, y2);
        canvas.drawPath(path, paint);
    
        return this;
    }
    

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

    0 讨论(0)
  • 2021-01-02 17:53

    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);
    PointF mPoint1 = new PointF(0, 0); //starts at canvas left top
    PointF mPoint2 = new PointF(w_2, h_2);//mid of the canvas
    Path drawPath1 =drawCurve(mPoint1, mPoint2);
    canvas.drawPath(drawPath1, paint);
    

    Method to draw the line

    private Path drawCurve(PointF mPointa, PointF mPointb) {
                Path myPath = new Path();
                myPath.moveTo(mPointa.x, mPointa.y);
                final float x2 = (mPointb.x + mPointa.x) / 3;
                final float y2 = (mPointb.y + mPointa.y) / 3;
                myPath.quadTo(x2, y2, mPointb.x, mPointb.y);
                return myPath;
    }
    

    0 讨论(0)
  • 2021-01-02 18:05

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

    float radius = 20;
    final RectF oval = new RectF();
    oval.set(point1.x - radius, point1.y - radius, point1.x + radius, point1.y+   radius);
    Path myPath = new Path();
    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.

    0 讨论(0)
提交回复
热议问题