Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing an arrow head in android

I am trying to draw an arrow to point to objects in am image. I have been able to write code to draw the line but cant seem to be able to find a way to draw the arrowhead.The code I wrote to draw a dragabble line is as follows.I need to draw an arrowhead on ACTION_UP event to the direction in which 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 anyone still needing help .This is how I did it in the end 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 the accepted answer and ios section in stackoverflow

like image 915
user2586488 Avatar asked Jul 17 '13 10:07

user2586488


2 Answers

How I would do this is to find the slope of the line, which is drawn between two points(start and end). The slope would be (dy/dx), and that would be a good start point for your arrow. Assuming you want the base of the arrowhead to be perpendicular to the line of the arrow, to find the slope of the base you would find the opposite reciprocal of the slope of the line. for example, lets say that your line has a slope of 2. The slope for the base of your triangle would 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 a drawPolygon method, and you would have to specify 4 points(3 unique and 1 the same as the first to close it). Given the slope of the base of the tip, we can get our first two points and our final point. You should know before you start the dimensions of the arrowhead you wish to draw, so in this case b will be the length of your baseline. If you take ϴ=arctan(dy/dx), that will give you an angle between the x axis and your baseline. With that ϴ value, you can do ydif = b*sin(ϴ) to get the difference in y value between the two base corners of your arrow. Doing the same thing but with xdif = b*cos(ϴ) gives you the difference in the x value between the two base points. If the location of the final point of the line that the user drew is, say, (x1, y1), then the locations of the basepoints of the triangle would 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 draw polygon method. To find the third point, we need to find the angle of the original line, by doing ϴ=arctan(dy/dx), this time using your original dy/dx. with that angle. Before we finish the actual calculation of the point, you first have to know how far from the end of your line the tip of the arrow should actually be, in my case, I will use the var h and h = 10. To get the cordinate, (x,y), assuming the cordinate for the line tip is (x1, y1)you would do (x1+hcosϴ, y1+hsinϴ). Use that for the third value in drawPolygon(), and you should be done. sorry if I kind of rushed at the end, I got kind of tired of typing, comment if you need help.

like image 52
JPeroutek Avatar answered Oct 03 '22 04:10

JPeroutek


If you managed to draw a line from the input event, you might additionally draw a triangle on its end indicating the direction.

On another project I drew a square everytime a magnetic point on a grid was touched (as you can see here) Sorry I can not provide you any sample code right now. But if that's a suitable approach for you, I might post it later.

like image 35
Father Stack Avatar answered Oct 03 '22 04:10

Father Stack