I referred the question Draw a circle within circle at a distance of 10
which comes close to my requirement. I just needed two concentric circles one inside the other inner one with radius scaled to 300 mts and outer one with radius scaled to 500 mts.
I have been able to draw the two circles scaled in pixels on my screen using a transformation method that transformed distance in metres to corresponding pixel distances.
The next step is to draw a plus inside the circle; the lines being the diameters. Hence they will pass through the center and contain two points on the circle.
1)I have the lat long and pixel details of the center of the circle.
2)I know that the angle between the center and the either points on the circle need to be 90 degrees.
3)I must use canvas.drawLine().
But what would be the best way to get these points on the circle so that a line can be drawn through these three points.
(Point on the circle at the top, center of the circle,Point on the circle at the bottom).
Greatly appreciate your help.
EDIT:
I tried the following code after some searching
//double degrees = 90.0;
//double radians = Math.toRadians(degrees);
//int x1 = (int) (500 * Math.cos(radians) + x);
//int y1 = (int) (500 * Math.sin(radians) + y);
//canvas.drawLine(x, y, x1, y1, mSelectionBrush);
canvas.drawLine(x, y-500, x, y+500, mSelectionBrush);
canvas.drawLine(x-500, y, x+500, y, mSelectionBrush);
x,y are the coordinates of the center. 500 is the radius of the outer circle.
The output I see is this. The line extends below. Am I going the right way?
I think you're on the right track. Notice that only Y changes for the vertical line.
Assuming center is given by C(a,b)
So the end-points would be
(a,b-r) and (a,b+r)
For the horizontal line only x changes:
(a-r,b) and (a+r,b) would be the end-points.
r is the radius.
Related
I want to place a small triangular bitmap centered on the dotted circle as similar to as follows:
Here is my code that places the bitmap according to a specified angle:
x = (float) (center.x + radius* Math.cos(Math.toRadians(getRotationAngle())));
y = (float) (center.y + radius * Math.sin(Math.toRadians(getRotationAngle())));
canvas.drawBitmap(mCurrentTimeIndicatorBitmap, x, y, new Paint(Paint.FILTER_BITMAP_FLAG));
getRotationAngle() returns a value between 0 and 360 (inclusive). center.x, center.y are a constant 500 and radius is a constant 313.3. However, as I rotate around the circle, the bitmap's distance to the dotted line varies and I do not know why. The above picture is with rotation angle at 0, where it is farthest from the center.
Near rotation angle 90:
Near rotation angle 180, where it is the furthest from the dotted line & closest to the center:
Near rotation angle 270:
As you can see the triangle is various distances away from the dotted line. What is causing this? My code to draw the dotted lines is very similar but no issue occurs there.
When you draw bitmap, you are using left top corner as base point. So this corner walks around the circle exactly. But bitmap center moves along the circle that is shifted to right and bottom.
Just subtract half-size of bitmap to get corner coordinates at every step (or shift center coordinates)
x = (float) (center.x - mCurrentTimeIndicatorBitmap.width / 2 +
radius* Math.cos(Math.toRadians(getRotationAngle())));
y = (float) (center.y - mCurrentTimeIndicatorBitmap.height / 2 +
radius * Math.sin(Math.toRadians(getRotationAngle())));
canvas.drawBitmap(mCurrentTimeIndicatorBitmap, x, y, new Paint(Paint.FILTER_BITMAP_FLAG));
I need to make a rotating wheel on my android App. To do so, I'm creating a custom View in order to place it anywhere I want in the App activities.
All around the wheel, I need to place TextViews.
Thanks to the width and height of the view, I can get the center point of the canvas' view.
I know the angle, I know the radius, so now I need to place textviews on the edge of the circle by calculating the coordinates on the canvas.
Does anyone knows how to achieve that ?
Thanks in advance !
A point at angle theta on the circle whose center is (x0,y0) and whose radius is r is (x0 + r cos theta, y0 + r sin theta)
Or
Once you have drawn the circle you have to rotate the canvas put the text at required angle and then again restore it as,
canvas.save();
canvas.rotate(45, x, y);
canvas.drawText("your text here", x, y, paint);
canvas.restore();
Hope that helps..!!
I'm trying to draw what looks like an old Analog meter. So I have an Arc (that may NOT be circular) drawn using the canvas.drawArc() method.
I need to be able to add "tick" marks (perpendicular to the arc) on the arc every X degrees.
So I want to find the coordinates of the end points of the tick mark line.
Anyone know the math needed for that?
use parametric ellipse equations:
x = x0 + rx * cos(a)
y = y0 + ry * sin(a)
x0,y0 is ellipse center
rx,ry are half axises
a is angle
The quickest description of this answer is that I am trying to find the coordinates of the white dot. The dark red is a drawn arc over a drawn circle (dark blue).
The longer explanation:
I have a class that is extending View and that is drawing a circle on the canvas (the canvas has equal width and height):
canvas.drawArc(rectF, 0, 360, true, paint); // mOvals is a RectF object with 4 coordinates
Then I draw an arc that is N percent wide (let's say 225 in this case). The arc starts from -90 degrees (because 0 degrees in the canvas means 3'o clocks) and "strays" N degrees (225 in this example).
I am trying to calculate the X/Y coordinates or the center of the remaining arc (the area that is not covered by the red arc; that is between N and 360).
I have the radius of the circle which is canvasWidth/2 if that is of some help.
Here's how I draw the red arc:
long arcEnd = (360 * fractionNumber) / totalNumber;
canvas.drawArc(rectF, -90, arcEnd, true, paint);
(Original answer updated. It may be a bit too verbose now, but I hope it helps.)
You're looking for the XY coordinates (called Cartesian coordinates), but these are difficult to calculate directly. The trick is to go through Polar coordinates first. Polar and Cartesian are two ways of expressing the same thing, namely a point in a grid and can be converted into eachother.
Polar coordinates consist of angle and distance from the center point. You can calculate the desired angle because you know the percentage of the circle that you need to cover and you can calculate the distance from the center because you know the radius of the circle.
Your covering arc is 225 degrees, so the remainder is 135 and half that is 67.5 degrees. The angle for the point you're looking for is therefore 225+67.5 = 292.5 degrees. The radius for that point is half the radius of the circle, so that's canvasWidth/4.
Once you've determined the polar coordinate, (292.5, canvasWidth/4), you convert this to the XY coordinate using the conversion function. There's one thing that's a bit tricky: Math.cos(double) and Math.sin(double) expect their argument to be in radians, not in degrees. You express your 292.5/360 as x/2π before making the conversion, which you do by multiplying the value by π/180, giving 5.1051 in this case.
Assuming that canvasWidth is 400:
double tdeg 292.5d; // Calculated from arc percentage
int r = 100; // Calculated from canvas width
double trad = tdeg * (Math.PI/180d); // = 5.1051
int x = (int) r * Math.cos(trad);
int y = (int) r * Math.sin(trad);
If my X co-ordinates increment every time a frame is drawn, what formula can I employ from the math library in order to have the Y co-ordinate moving around the circumference of a circle frame by frame, creating the illusion of an orbiting object around a continuously moving central point?
I have seen it may involve sin or cos but am not sure how to adjust the variables accordingly per frame.
Many thanks for your help
You can't make a complete circle if your X coordinate increments every time, because half the time your X coordinate has to be decrementing.
What you want is polar coordinates: theta for angle and r for radius. Your r will remain constant, and your theta will increment continuously. Then your x and y are:
x = r * cos(theta)
y = r * sin(theta)
let ox,oy be the origin of your circle, and px,py be a point on the edge of the circle, with a radius of r
given: (px-ox)^2 + (py-oy)^2 = r^2 definition of circle
solve for py:
(py-oy)^2 = r^2 - (px-ox)^2
(py-oy) = sqrt(r^2 - (px-ox)^2)
py = sqrt(r^2 - (px-ox)^2) + oy <---
So as you increment px with your frames, you can find the appropriate py by recalculating the above formula.