1

Currently I'm drawing a arrow head to my canvas by doing the following:

mPaint.setStyle(Style.FILL);

float deltaX = this.mPoints[1].x - this.mPoints[3].x;
float deltaY = this.mPoints[1].y - this.mPoints[3].y;
float frac = (float) 0.1;

float point_x_1 = this.mPoints[3].x + (1 - frac) * deltaX + frac * deltaY;
float point_y_1 = this.mPoints[3].y + (1 - frac) * deltaY - frac * deltaX;

float point_x_2 = this.mPoints[1].x;
float point_y_2 = this.mPoints[1].y;

float point_x_3 = this.mPoints[3].x + (1 - frac) * deltaX - frac * deltaY;
float point_y_3 = this.mPoints[3].y + (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, mPaint);

The above works fine. The problem I have is that the direction of the arrow is always pointing to the top right corner of my screen.

enter image description here

MY QUESTION:

How can I modify, what I already have, to draw the arrow in the direction of of my onTouchEvent?

It's also worth mentioning that I already get the direction in my onTouchEvent that I pass to my onDraw as shown below:

//Starting point X
float startX = mX; // MotionEvent.ACTION_DOWN ---> mX = event.getX();
//Starting point Y
float startY = mY; // MotionEvent.ACTION_DOWN ---> mY = event.getY();
//Move to X
float stopX = pX; // MotionEvent.ACTION_MOVE ---> pX = event.getX();
//Move to Y
float stopY = pY; // MotionEvent.ACTION_MOVE ---> pY = event.getY();

Using the above, when I draw a line, I would call:

canvas.drawLine(startX, startY, stopX, stopY, mPaint);

This will draw the line in the direction I want. The problem is that canvas.drawPath takes 2 fields path and paint where canvas.drawLine takes 5 fields startX, startY, stopX, stopY, paint.

Any advise would greatly be appreciated.

ClassA
  • 2,480
  • 1
  • 26
  • 57
  • simply calculate the angle for (startX, startY) (stopX, stopY) vector and rotate and translate the canvas before calling `Canvas#drawPath` – pskink Nov 27 '18 at 08:55
  • @pskink but what if I want to draw multiple shapes, the other shapes will be rotated with the canvas? – ClassA Nov 27 '18 at 09:02
  • your question was: `"How can I modify, what I already have, to draw the arrow in the direction of of my onTouchEvent?"` wasnt it? – pskink Nov 27 '18 at 09:03
  • @pskink yes it was. – ClassA Nov 27 '18 at 09:04
  • if you want to draw something else use `Canvas#save` / `Canvas#restore` – pskink Nov 27 '18 at 09:23
  • @pskink rotating the canvas didn't work, when I rotate the canvas the arrow is still pointing to the top right corner, but now it is at a different location on the screen. – ClassA Nov 28 '18 at 03:35
  • `Canvas#rotate` method works just fine – pskink Nov 28 '18 at 08:47
  • @pskink rotating the canvas doesn't take in account where the arrow was originally drawn, causing the drawn object to be misplaced, sometimes off screen. – ClassA Nov 28 '18 at 10:01
  • so draw it from (0, 0) origin - `path.moveTo(0, 0); ...` – pskink Nov 28 '18 at 10:03
  • @pskink Like I said in the question, I start drawing from `MotionEvent.ACTION_DOWN` if I set `path.moveTo(0, 0);` it will still not be at the correct place. – ClassA Nov 28 '18 at 10:06
  • did you see my first comment here? (`"... and rotate and translate the canvas before calling ..."`) - it means you have to rotate and **translate** the canvas – pskink Nov 28 '18 at 10:08
  • @pskink Can you please provide a answer? – ClassA Nov 28 '18 at 10:10
  • path.movetTo(0,0); path.lineTo(50,0); canvas.rotate(10); canvas.translate(100, 200); canvas.drawPath(path, paint); - of course insted of one `lineTo` you have to use 3 lines to form the triangle – pskink Nov 28 '18 at 10:26
  • @pskink Thank you for your time. Unfortunately this will not work with what I'm trying to achieve. I would like to point the arrow in the direction that the user drag their finger. Doing it in this way I would have to find some way to rotate the arrow a certain amount to match the `onTouchEvent`, as my question states - `How can I modify, what I already have, to draw the arrow in the direction of of my onTouchEvent`. I asked a new question - https://stackoverflow.com/q/53513066/8199772 – ClassA Nov 28 '18 at 12:20
  • sorry i hae no time to write complete code in java: [here](https://pastebin.com/raw/93Jbh8aP) you have the working method written in dart for flutter app - here radians is angle of your line and dx and dy is your `onTouchEvent` x and y position - thats all – pskink Nov 28 '18 at 12:50
  • I will give it a try. Thank you very much for taking the time to reply. – ClassA Nov 28 '18 at 16:52
  • 1
    https://pastebin.com/raw/S9L9SK8Z - it does not work well when fingers slows down but i wanted it to be simple and hope you will get the idea – pskink Nov 28 '18 at 16:53
  • Thank you very much – ClassA Nov 28 '18 at 16:56

0 Answers0