Search code examples
androidcanvasline

How to draw a curved line in android?


I am new to Android and I am developing a sample project on drawing lines. I want to draw a curved or elevated line connecting two points (x1,y1 and x2,y2). I tried canvas.drawArc() method, but the RectF values inside the drawArc method is just the x,y center points of circle. It is giving me an arc between my two points. But I want a curved line exactly connecting my two points. Can somebody help me? Thanks in advance.


Solution

  • Declare this method inside onDraw method:

    private void drawOvalAndArrow(Canvas canvas){
    
    
        Paint circlePaint = new Paint();
        circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        circlePaint.setAntiAlias(true);
        circlePaint.setStrokeWidth(2);
        circlePaint.setColor(Color.CYAN);
    
        float centerWidth = canvas.getWidth()/2; //get center x of display
        float centerHeight = canvas.getHeight()/2; //get center y of display
        float circleRadius = 20; //set radius 
        float circleDistance = 200; //set distance between both circles
    
        //draw circles
        canvas.drawCircle(centerWidth, centerHeight, circleRadius, circlePaint);
        canvas.drawCircle(centerWidth+circleDistance, centerHeight, circleRadius, circlePaint);
    
    
        //to draw an arrow, just lines needed, so style is only STROKE
        circlePaint.setStyle(Paint.Style.STROKE);       
        circlePaint.setColor(Color.RED);
    
        //create a path to draw on
        Path arrowPath = new Path();
    
        //create an invisible oval. the oval is for "behind the scenes" ,to set the path´
        //area. Imagine this is an egg behind your circles. the circles are in the middle of this egg
        final RectF arrowOval = new RectF();
        arrowOval.set(centerWidth, 
                centerHeight-80, 
                centerWidth + circleDistance, 
                centerHeight+80);
    
        //add the oval to path
        arrowPath.addArc(arrowOval,-180,180);
    
        //draw path on canvas
        canvas.drawPath(arrowPath, circlePaint);
    
    
        //draw arrowhead on path start
         arrowPath.moveTo(centerWidth,centerHeight ); //move to the center of first circle
         arrowPath.lineTo(centerWidth-circleRadius, centerHeight-circleRadius);//draw the first arrowhead line to the left
         arrowPath.moveTo(centerWidth,centerHeight );//move back to the center
         arrowPath.lineTo(centerWidth+circleRadius, centerHeight-circleRadius);//draw the next arrowhead line to the right
    
         //same as above on path end
         arrowPath.moveTo(centerWidth+circleDistance,centerHeight );
         arrowPath.lineTo((centerWidth+circleDistance)-circleRadius, centerHeight-circleRadius);
         arrowPath.moveTo(centerWidth+circleDistance,centerHeight );
         arrowPath.lineTo((centerWidth+circleDistance)+circleRadius, centerHeight-circleRadius);
    
         //draw the path
         canvas.drawPath(arrowPath,circlePaint);
    
    }
    

    Also this will find the two sides of the screen (Landscape mode) and will draw a perfect curve across the screen

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    
        PointF mPoint1 = new PointF(w/1.2F, h/1.2F);
        PointF mPoint2 = new PointF(w/24, h/1.2F);
        Path myPath1 = new Path();
        Paint paint  = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(2);
        paint.setColor(Color.WHITE);
    
        myPath1 = drawCurve(canvas, paint, mPoint1, mPoint2);
        canvas.drawPath(myPath1, paint);
    
    }
    
    private Path drawCurve(Canvas canvas, Paint paint, PointF mPointa, PointF mPointb) {
    
        Path myPath = new Path();
        myPath.moveTo(63*w/64, h/10);
        myPath.quadTo(mPointa.x, mPointa.y, mPointb.x, mPointb.y);
        return myPath;  
    }
    

    Useful references on painting in android:

    How to draw Arcs in Android using canvas?

    Basic Painting with Views