Drawing arrows in android

Question

I am trying to draw an arrow to point to objects in the image. I was able to write code to draw a line, but I couldn't seem to find a way to draw an arrow. The code I wrote to draw a dragabble line is as follows. I need to draw an arrow in the ACTION_UP event the direction the line is pointing

if(event.getAction() ==MotionEvent.ACTION_DOWN) { if (count==1){ x1 = event.getX(); y1 = event.getY(); System.out.println(count+"count of value a;skd"); Toast.makeText(getApplicationContext(), ""+(radius+count), Toast.LENGTH_LONG).show(); Log.i(TAG, "coordinate x1 : "+String.valueOf(x1)+" y1 : "+String.valueOf(y1)); } } else if(event.getAction() ==MotionEvent.ACTION_MOVE){ imageView.setImageBitmap(bmp2); x2 = event.getX(); y2 = event.getY(); posX=(float)(x1+x2)/2; posY=(float)(y1+y2)/2; radius=(float) Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2))/2; onDraw(); Toast.makeText(getApplicationContext(), ""+radius, Toast.LENGTH_LONG).show(); } 

Hi, for those who still need help. This is how I did it at the end of float h = (float) 30.0;

  float phi = (float) Math.atan2(y2 - y1, x2 - x1); float angle1 = (float) (phi - Math.PI / 6); float angle2 = (float) (phi + Math.PI / 6); float x3 = (float) (x2 - h * Math.cos(angle1)); float x4 = (float) (x2 - h * Math.cos(angle2)); float y3 = (float) (y2 - h * Math.sin(angle1)); float y4 = (float) (y2 - h * Math.sin(angle2)); c.drawLine(x1, y1,x2,y2 ,pnt); c.drawLine(x2, y2,x3,y3 ,pnt); c.drawLine(x2, y2,x4,y4 ,pnt); 

I got help from accepted answer and ios section in stackoverflow

Answer 1

How I would do this is to find the slope of the line that is drawn between two points (start and end). The tilt will be (dy / dx) and this will be a good starting point for your arrow. Assuming you want the base of the arrow to be perpendicular to the line of the arrow, to find the tilt of the base, you will find the opposite back side of the tilt of the line. for example, let's say that your line has a slope of 2. The slope for the base of your triangle will be (-1/2), because you do (1 / (oldslope)) and multiply by -1. I don't know android very well, but if I remember correctly, in Java you would use the drawPolygon method, and you would need to specify 4 points (3 unique and 1 the same as the first to close it). Given the slope of the tip base, we can get our first two points and our end point. You must know before you start the dimensions of the arrow you want to draw, so in this case b will be the length of your baseline. If you take ϴ=arctan(dy/dx) , this will give you the angle between the x axis and the base level. With this value, you can do ydif = b*sin(ϴ) to get the difference in y value between the two base corners of the arrow. Doing the same, but with xdif = b*cos(ϴ) gives you the difference in the value of x between the two base points. If the location of the endpoint of the line drawn by the user is, say, (x1, y1) , then the locations of the base points of the triangle will be (x1-(xdif/2), y1-(ydif/2)) and (x1+(xdif/2), y1+(ydif/2)) . These two points, p1 and p2, are the first, second, and fourth points in the polygon drawing method. To find the third item, we need to find the angle of the original line by doing ϴ=arctan(dy/dx) , this time using your original dy / dx. with this angle. Before we finish the actual point calculation, you first need to know how far from the end of your line the arrowhead should be, in my case I will use var h and h = 10 . To get the coordinate, (x, y), assuming the cord for the tip of the line is (x1, y1), you would do (x1+hcosϴ, y1+hsinϴ) . Use this for the third value in drawPolygon() , and you need to do this. Sorry, if I rushed at the end, I’m tired of typing, commenting, if you need help.

Answer 2

If you were able to draw a line from the input event, you can additionally draw a triangle at its end, indicating the direction.

In another project, I drew a square every time a magnetic point on the grid was touched (as you can see here ) Sorry, I can’t provide you have a sample code right now. But if this is suitable for you, I can publish it later.

Answer 3

Here is a good code, its not mine. This was the Java Graphics2D code that I converted to Canvas. All credits go to the original guy / lady who wrote it.

 private void drawArrowHead(Canvas canvas, Point tip, Point tail) { double dy = tip.y - tail.y; double dx = tip.x - tail.x; double theta = Math.atan2(dy, dx); int tempX = tip.x ,tempY = tip.y; //make arrow touch the circle if(tip.x>tail.x && tip.y==tail.y) { tempX = (tip.x-10); } else if(tip.x<tail.x && tip.y==tail.y) { tempX = (tip.x+10); } else if(tip.y>tail.y && tip.x==tail.x) { tempY = (tip.y-10); } else if(tip.y<tail.y && tip.x==tail.x) { tempY = (tip.y+10); } else if(tip.x>tail.x || tip.x<tail.x) { int rCosTheta = (int) ((10)*Math.cos(theta)) ; int xx = tip.x - rCosTheta; int yy = (int) ((xx-tip.x)*(dy/dx) + tip.y); tempX = xx; tempY = yy; } double x, y, rho = theta + phi; for(int j = 0; j < 2; j++) { x = tempX - arrowLength * Math.cos(rho); y = tempY - arrowLength * Math.sin(rho); canvas.drawLine(tempX,tempY,(int)x,(int)y,this.paint); rho = theta - phi; } } 

Just name it for both sides of your line and draw an arrow on each side!