Draw a curve line with an arrow in android canvas

Question

draw a curved line with an arrow from point 1 (x1, y1) to point2 (x2, y2), like this

I am developing an application in an android canvas. machines like an application, and I am having trouble drawing a curved line with an arrow at the end. indicating the next circle.

Can you give me a code or suggestion about this?

Answer 1

I think you need a mix of track drawing and line drawing. Declare this method inside your onDraw:

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); } 

This is just a bad example, but it should show where to start.

Answer 2

I know that I have to leave a comment, but the code in the comment is hard to read, so I summed up another answer. Opiatefuchs answer is actually correct. but there is one thing you should notice if you want to check its code.

 float centerWidth = canvas.getWidth()/2; //get center x of display float centerHeight = canvas.getHeight()/2; //get center y of display 

centerWidth and centerHeight should be obtained as shown below, or nothing will be drawn on your screen. and circleDistance = 200 is a little big for a regular phone screen (as for my samsung i9300, 200 is too large, the second circle is outside the range of the screen, for example, you change it to a lower value of 80.)

  @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); centerWidth = w / 2; centerHeight = h / 2; } 

screenshot.