How to draw an arrow using android graphic class?

Question

How to draw an arrow using a graphics class?

I use the graphics class for Android and basically try to show the path on the map. Therefore, I need to print an arrow on the canvas. Help me figure it out!

Thanks!

This is one of the methods I used to draw the line. I want to print an arrow on the edge of each line.

// ArrayList<Point> ArrayListPoints = new ArrayList<Point>(); // Assign the shortest path here // ArrayListPoints.add(new Point(262,100)); // ArrayListPoints.add(new Point(262,165)); // ArrayListPoints.add(new Point(346,165)); // ArrayListPoints.add(new Point(420,165)); ArrayList<Point> ArrayListPointsFINAL; ArrayListPointsFINAL = storePath.ArrayListPoints; if(ArrayListPointsFINAL == null){ System.out.println("ArrayListPointsFINAL is NULL"); } else{ ArrayList<Float> ArrayList_X = new ArrayList<Float>(); ArrayList<Float> ArrayList_Y = new ArrayList<Float>(); //int size = get.ArrayListPoints.size(); for(int i=0; i<ArrayListPointsFINAL.size(); i++){ ArrayList_X.add(Float.parseFloat(String.valueOf(ArrayListPointsFINAL.get(i).x))); ArrayList_Y.add(Float.parseFloat(String.valueOf(ArrayListPointsFINAL.get(i).y))); } for(int i=1; i<ArrayList_X.size(); i++){ Paint myPaint = new Paint(Paint.ANTI_ALIAS_FLAG); myPaint.setStrokeWidth(8/*1 /getResources().getDisplayMetrics().density*/); myPaint.setColor(0xffff0000); //color.RED // myPaint.setStyle(myPaint); canvas.drawLine(ArrayList_X.get(i), ArrayList_Y.get(i), ArrayList_X.get(i-1), ArrayList_Y.get(i-1),myPaint); } 

Answer 1

Instead, you can draw a bitmap and apply a matrix to it.

Answer 2

Hope you find it useful anyway; this is how i draw the arrow:

  private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) { paint.setStyle(Paint.Style.FILL); float deltaX = x1 - x0; float deltaY = y1 - y0; float frac = (float) 0.1; float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY); float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX); float point_x_2 = x1; float point_y_2 = y1; float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY); float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX); Path path = new Path(); path.setFillType(Path.FillType.EVEN_ODD); path.moveTo(point_x_1, point_y_1); path.lineTo(point_x_2, point_y_2); path.lineTo(point_x_3, point_y_3); path.lineTo(point_x_1, point_y_1); path.lineTo(point_x_1, point_y_1); path.close(); canvas.drawPath(path, paint); } 

For a line with end points for p (x0, y0) and p (x1, y1), the method draws an arrow with its vertex at p (x1, y1).

Variable

 frac : 0 < frac < 1 

determines the size of the arrow’s head.

Hooray!

Answer 3

// using a custom view, you can draw using path primitives:

  private Paint mPaint; // paint object private Path mPathGrid; // path object @Override protected void onDraw(Canvas canvas) { if (mPaint == null) mPaint = new Paint(); // cache your paint object if (mPathGrid == null) mPathGrid = new Path(); // and your path mPaint.setStyle(Paint.Style.FILL); mPaint.setAntiAlias(true); // a white arrow pointing down mPaint.setColor(Color.WHITE); mPaint.setStrokeWidth(2); mPathGrid.reset(); mPathGrid.moveTo(100.0, 100.0); // 100,100 is starting point of path // "draw" the outline of your arrow... play "connect the dots"... mPathGrid.lineTo(100.0 + 10.0f, 100.0); mPathGrid.lineTo(100.0 + 10.0f, 100.0 - 5.0f); mPathGrid.lineTo(100.0 + 13.0f, 100.0 - 5.0f); mPathGrid.lineTo(100.0 + 10.0f, 100.0 - 8.0f); mPathGrid.lineTo(100.0 + 7.0f, 100.0 - 5.0f); mPathGrid.lineTo(100.0 + 10.0f, 100.0 - 5.0f); canvas.drawPath(mPathGrid, mPaint); super.onDraw(canvas); } 

I saw this in your code:

 for(int i=1; i<ArrayList_X.size(); i++) { Paint myPaint = new Paint(Paint.ANTI_ALIAS_FLAG); myPaint.setStrokeWidth(8/*1 /getResources().getDisplayMetrics().density*/); myPaint.setColor(0xffff0000); //color.RED // myPaint.setStyle(myPaint); canvas.drawLine(ArrayList_X.get(i), ArrayList_Y.get(i), ArrayList_X.get(i-1), ArrayList_Y.get(i-1),myPaint); } 

don't create new Paint objects in a loop like this, you only need one! And you only need to set properties such as stroke width, color, etc. Once.

Answer 4

I suggest you create an arrow bitmap and with the following code from my message here , you can easily shoot the arrow.

Hope this helps.

Answer 5

I try this code, it works great

 Here is my code... switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mPath.reset(); mPath.moveTo(x, y); mX = x; mY = y; startPoint = new PointF(event.getX(), event.getY()); endPoint = new PointF(); invalidate(); // isDrawing = true; break; case MotionEvent.ACTION_MOVE: float dx = Math.abs(x - mX); System.out.println("action move"); float dy = Math.abs(y - mY); if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) { // currentDrawingPath.path.quadTo(mX,mY,(x + mX)/2, (y + mY)/2); } mX = x; mY = y; endPoint.x = event.getX(); endPoint.y = event.getY(); isDrawing = true; invalidate(); break; case MotionEvent.ACTION_UP: mPath.lineTo(mX, mY); float deltaX = endPoint.x-startPoint.x; float deltaY = endPoint.y-startPoint.y; float frac = (float) 0.1; float point_x_1 = startPoint.x + (float) ((1 - frac) * deltaX + frac * deltaY); float point_y_1 = startPoint.y + (float) ((1 - frac) * deltaY - frac * deltaX); float point_x_2 = endPoint.x; float point_y_2 = endPoint.y; float point_x_3 = startPoint.x + (float) ((1 - frac) * deltaX - frac * deltaY); float point_y_3 = startPoint.y + (float) ((1 - frac) * deltaY + frac * deltaX); mPath.moveTo(point_x_1, point_y_1); mPath.lineTo(point_x_2, point_y_2); mPath.lineTo(point_x_3, point_y_3); mPath.lineTo(point_x_1, point_y_1); mPath.lineTo(point_x_1, point_y_1); mCanvas.drawPath(mPath, ppaint); endPoint.x = event.getX(); endPoint.y = event.getY(); isDrawing = false; invalidate(); break; default: break; } 

Answer 6

When I used the Igwe Kalu solution, the head size of the arrow varied depending on the distance between the points.

Here is my solution so that the arrow has a constant size, regardless of the distance between the points.

 private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) { paint.setStyle(Paint.Style.FILL); float deltaX = x1 - x0; float deltaY = y1 - y0; double distance = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)); float frac = (float) (1 / (distance / 30)); float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY); float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX); float point_x_2 = x1; float point_y_2 = y1; float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY); float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX); Path path = new Path(); path.setFillType(Path.FillType.EVEN_ODD); path.moveTo(point_x_1, point_y_1); path.lineTo(point_x_2, point_y_2); path.lineTo(point_x_3, point_y_3); path.lineTo(point_x_1, point_y_1); path.lineTo(point_x_1, point_y_1); path.close(); canvas.drawPath(path, paint); } 

Answer 7

The same thing works ... But to illustrate .. call the method below on onDraw .. so you can see how it works ...

 private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) { Paint paint = new Paint(); paint.setColor(Color.BLACK); paint.setStyle(Paint.Style.FILL); float deltaX = x1 - x0; float deltaY = y1 - y0; float distance = (float) Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)); float frac = (float) (1 / (distance / 15)); float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY); float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX); float point_x_2 = x1; float point_y_2 = y1; float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY); float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX); float midOfArrow_x = (point_x_1 + point_x_3) / 2; float midOfArrow_y = (point_y_1 + point_y_3) / 2; Path path = new Path(); path.setFillType(Path.FillType.EVEN_ODD); path.moveTo(point_x_1, point_y_1); path.lineTo(point_x_2, point_y_2); path.lineTo(point_x_3, point_y_3); path.lineTo(point_x_1, point_y_1); // path.lineTo(point_x_1, point_y_1); path.close(); path.transform(mMatrix); canvas.drawPath(path, paint); paint = new Paint(); paint.setColor(Color.RED); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(9); path = new Path(); path.moveTo(x0, y0); path.lineTo(midOfArrow_x, midOfArrow_y); path.transform(mMatrix); canvas.drawPath(path, paint); paint = new Paint(); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.STROKE); canvas.drawCircle(x0, y0, 10, paint); canvas.drawCircle(midOfArrow_x, midOfArrow_y, 10, paint); paint.setColor(Color.RED); canvas.drawCircle(point_x_1, point_y_1, 10, paint); paint.setColor(Color.GREEN); canvas.drawCircle(point_x_2, point_y_2, 10, paint); paint.setColor(Color.BLUE); canvas.drawCircle(point_x_3, point_y_3, 10, paint); }