Well I`m trying to find solution to a small problem.
I have multiple points on a canvas and have to connect them with a straight line. So exactly one incoming or outgoing connection per point. I have the 2 points for a line.
It all works with canvas.drawline(...) method. But now i want to be able to detect if a there was a click/touch event on a particular line within the line + padding area.
As line is drawn inside a rectangular bounding box its size varies based on the length and frequently overlaps with other bounding boxes. So considering touch within the bounding box is completely dumb i guess.
Can someone please give me some input in this direction?
Thanks a lot!
You can calculate perpendicular distance of the touch from the line.If the distance is within some range(in your case padding size) you consider as touch event on the line.
To calculate perpendicular distance use this formula refer-Shortest distance between a point and a line segment
Related
Could someone explain me how convex path is calculated? I need to draw some cubic and additionally some lines but then path is shown as non convex. However when I leave only lines or just cubic it is then convex. The problem is that I need some non regular shaped background and need Convex path for shadow outline but can't get how I could connect drawing cubic with some lines to make convex path if it is even possible
A path is convex if it has a single contour, and only ever curves in a single direction.
Convex means it keeps bending / rotating in one direction, and one direction only. You really have to make sure that all your angles and curves add up. If your curve connects to a line it has to have the same angle or be "more convex", I hope the following 2 images will clear this up.
The picture below is not convex. That's also likely your problem. The line connects to a curve, but the curve has a different angle than the line and it will change the direction where it connects. See where the line goes down but instead of continuing the downwards-motion it suddenly goes up again. Instead of keeping one direction it will change for a moment where line and curve meet.
The above Image is exaggerated for clarity, but even small errors in the connection between the line and curve will trigger an error.
The next line connects to a curve with a steeper angle. This is convex and won't be a problem. See how the whole contour keeps a single motion in one direction, depending in which direction you follow it it keeps turning left/right.
I answered because I was facing a similar issue recently and I feel your pain. I recommend pen and paper to double and triple check the math and to use a small epsilon value to account for rounding errors etc... You really have to nail the math, because if your line and curve connection is just off by very little it will throw that exception.
Sorry for my bad paint skills
I'm creating an Android app which simulates petri nets. I'm representing place by circle and transition by square and I'm connecting those views by arc (it's just the name from petri nets for my purpose it's just a straight line) and here's the problem I'm facing, I know how to connect the centre point of those views but i don't know how to connect the border of circle and border of square, look at the image it should explain everything:
In my app I know if I'm pointing a place (circle) or transition (square), I also know the dimension of those views and it's coordinates, can you suggest me any start point for writing an algorithm which will connect borders of those two shapes and draw the arrow at the end of the line? Thanks in advance
You can make a method that takes in an angle and returns the point on the boundary at that angle from the center. This involves a little trigonometry, and cases for the square. To draw a line between the boundaries of two shapes, determine the angle of the difference vector atan2(difference in ys, difference in xs). Choose the point on the boundary with that angle. (This chooses the point that is on the line segment connecting the centers. You can change this if you want.) Connect the two points you get with a line, and add the arrow's head.
I am using FingerPaint example available in ApiDemos for drawing my finger movement on screen.
Now instead of line, I am adding circles in my path object and this path with circle will be drawn when onDraw method is called.
Now my issue is when I slowly move my finger it draws circles at the points given by onTouchEvent properly but when I move my finger with some speed, unlike line, it draws only few circles.
After debugging, I found that while moving finger rapidly, some of the touch events are dropped by the view and on that points circles are not drawn.
Can anyone give some pointers on this. Why this is happening?
Two things I can think of without seeing code.
First, are you getting the historical points recorded between touchEvents and using them also? If not, that would cause some serious jerkiness like you are talking about.
If you are, and it's just not picking them up, the best you'll be able to do might be to cheat it some. Check the distance between the current and last circle drawn. If it exceeds the circle's diameter too much, draw a line with the same thickness as the circle, with a circle on both ends.
http://farm3.anhso.net/upload/20110221/12/o/anhso-121531_example.jpg
Here is the examples, when you drag A or B , the size of rectangle will be changed
How can i do it?
Its fairly simple. Let me assume that there is only a single view in your layout. This makes a few things a lot easier.
When you receive a touch down action, you must check where on the view this point lies. the coordinates of the rectangle are obviously known to you. Also understand that you need to touch in the vicinity of A or B. Touch is only "intended" to be precise. But in actuality its not. So you must create a vicinity over which you will accept the touch to be at the stipulated point.
If the touched point is in the vicinity of A or B, you should set a flag which will be checked for in the touch move action. Storing every point touched or moved upon in some sort of reference variable is a good idea, cuz then you can get the displacement of the current point (where finger is touching at the moment) from the last known point (that was touched before - your reference point).
using this difference (delta along x and y) you will be able to alter the length and height of the rectangle. Invalidate the view after changing these parameters. The rectangle is drawn again and it will seem like the dimensions have changed.
Whats the best way to create a dart board game on Android. Is it possible to determine where a dart hit and in which area it is using a canvas or do I need to use a diffenrent approach?
Edit
Sorry I dont think I have explained my problem very well.
In svg in html5 I can create a dart board using shapes and assign an id to each shape. When a dart lands on a shape the code knows which shape it has landed on, gets its id and calculates the score. e.g id="20" id="60" id="40" for all 20 areas on a dart board.
How would I do this on the Android?
You've got the right idea. A simple approach would be to display a custom DartBoardView in an activity. The view would use an overridden onDraw to draw a dart board image and any darts the user has "thrown." The view would then use View.onTouchEvent to handle user touch events and translate those into new darts.
New answer based on your update:
You're going to have to do the hit detection manually. A touch event will give you an x-y coordinate with the upper left of the view as origin. Calculating points would go as follows:
Offset the given coords so they line up with the center of your board (i.e. touching the middle of your board would give (100, 150), translate that to (0,0)).
Get the angle of the touch to find which numbered section of the board was hit. Something like double touchAngle = Math.atan2(y,x). Might need to convert from radians to degrees here.
Map the angle to a base point value (if angle > 9 && angle < 27, base points = 7)
Multiply the base point value by 2 or 3 if the distance of the touch (distance = Math.sqrt(x^2 + y^2)) from center is a particular length away to account for the multiplier rings.