How to Draw an Arrowhead (In Android)

How do I draw an arrowhead (in Android)?

How about using "Path myPath = new Path();" where you would give the x and y positions to create a triangle using lines and filling it. You can read about it, here is an example I took from somewhere.

// create and draw triangles
// use a Path object to store the 3 line segments
// use .offset to draw in many locations
// note: this triangle is not centered at 0,0
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setColor(Color.RED);
Path path = new Path();
path.moveTo(0, -10);
path.lineTo(5, 0);
path.lineTo(-5, 0);
path.close();
path.offset(10, 40);
canvas.drawPath(path, paint);
path.offset(50, 100);
canvas.drawPath(path, paint);
// offset is cumlative
// next draw displaces 50,100 from previous
path.offset(50, 100);
canvas.drawPath(path, paint);

Drawing an arrow head in android

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.

How to draw an arrow using android graphic class?

You can draw a Bitmap instead and apply a matrix to it.

Draw arrow head in canvas using Angle

With help from pskink I came to the solution, Sample code, which draw the line with arrow head from 200, 200 to 400, 400

path.reset();
RectF rectF = new RectF(200, 200, 400, 400);
canvas.save();
canvas.translate(rectF.left, rectF.top);
float direction = (float) Math.atan2(rectF.bottom - rectF.top, rectF.right - rectF.left);
float degree = (float) Math.toDegrees(direction);
canvas.rotate(degree);
canvas.drawColor(Color.parseColor("#E3F2FD"));
path.moveTo(0, 0);
float x = rectF.right - rectF.left;
float y = rectF.bottom - rectF.top;
float distance = (float) Math.sqrt(x * x + y * y);
path.lineTo(distance, 0);
float x1 = distance - (distance * 20 / 100);
float y1 = -(distance * 15 / 100);
path.moveTo(x1, y1);
path.lineTo(distance, 0);
float x2 = distance - (distance * 20 / 100);
float y2 = (distance * 15 / 100);
path.lineTo(x2, y2);
canvas.drawPath(path, mPaint);
canvas.restore();

SC:

Note If you don't want to rotate canvas, you can use Helder Sepulveda's answer, it also works as expected.

android canvas draw line with pointer ended arrows both side. can anyone help me out with it.?

Use these Methods to draw Arrow on both sides.

private void drawArrow1(Canvas canvas, Paint paint) {
    double degree = calculateDegree(x, x1, y, y1);
    float endX1 = (float) (x1 + ((10) * Math.cos(Math.toRadians((degree-30)+90))));
    float endY1 = (float) (y1 + ((10) * Math.sin(Math.toRadians(((degree-30)+90)))));

    float endX2 = (float) (x1 + ((10) * Math.cos(Math.toRadians((degree-60)+180))));
    float endY2 = (float) (y1 + ((10) * Math.sin(Math.toRadians(((degree-60)+180)))));

    canvas.drawLine(x1,y1,endX1,endY1,paint);
    canvas.drawLine(x1, y1, endX2,endY2,paint);
}

private void drawArrow(Canvas canvas, Paint paint) {

    double degree1 = calculateDegree(x1, x, y1, y);
    float endX11 = (float) (x + ((10) * Math.cos(Math.toRadians((degree1-30)+90))));
    float endY11 = (float) (y + ((10) * Math.sin(Math.toRadians(((degree1-30)+90)))));

    float endX22 = (float) (x + ((10) * Math.cos(Math.toRadians((degree1-60)+180))));
    float endY22 = (float) (y + ((10) * Math.sin(Math.toRadians(((degree1-60)+180)))));

    canvas.drawLine(x,y,endX11,endY11,paint);
    canvas.drawLine(x,y,endX22,endY22,paint);
}

public double calculateDegree(float x1, float x2, float y1, float y2) {
    float startRadians = (float) Math.atan((y2 - y1) / (x2 - x1));
    System.out.println("radian=====" + Math.toDegrees(startRadians));
    startRadians += ((x2 >= x1) ? 90 : -90) * Math.PI / 180;
    return Math.toDegrees(startRadians);
}

Where x,y is starting point and x1,y1 is ending point.

how to draw an arrow in android touch event?

i tried this below code.this is worked for me,

enter code here

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

---

Related Topics