I drawn line passing through points - (x1,y1) , (x2,y2)
Now i want to draw another line perpendicular to this line with same length.
Please guide me for this ..
Think of your line as a vector from (x1,y1) to (x2,y2). Then we get the x and y components of this vector according to
vX = x2-x1
vY = y2-y1
The vector of equal size to this but perpendicular to it in the plane has x and y components
vXP = -(y2-y1)
vYP = x2-x1
you can verify these 2 vectors are perpendicular by taking the scalar product of the 2 vectors which will be zero. Now you have your vector of equal length and perpendicular to your first vector, you simply need to decide the start point of your line. We will call that (a,b). Then using your start point, the end point of your line is given by
(a - (y2-y1), b + (x2-x1))
or if you want it to point in the reverse direction (still perpendicular) it will be
(a + (y2-y1), b - (x2-x1))
Well, it's simple maths :
int dx = x2 - x1;
int dy = y2 - y1;
int ox,oy; // Origin of new line
//...
drawLine( ox, oy, ox+dy, oy-dx) // This line will be perpendicular to original one
All you have to do is to choose the origin.
For example, if you want that the lines cuts at their center, let :
ox = x1 + (dx - dy) / 2;
oy = y1 + (dx + dy) / 2;
Related
I have requirement that a circle should be divided into N equal parts based on number(2,3...n. But I want the coordinates of dividing points.
I have a circle whose centre(x,y) and radius(150) are known.
Question:
Is there any formula which gives me the coordinates of dividing points as shown in figure. Can anyone please tell me the formula. I want to implement it in Java.
Circle image for refrence:
I have already accepted answer... the formula works perfectly.
Here is the solution coded in Java. It will help other developers.
private int x[]; // Class variable
private int y[]; // Class variable
private void getPoints(int x0,int y0,int r,int noOfDividingPoints)
{
double angle = 0;
x = new int[noOfDividingPoints];
y = new int[noOfDividingPoints];
for(int i = 0 ; i < noOfDividingPoints ;i++)
{
angle = i * (360/noOfDividingPoints);
x[i] = (int) (x0 + r * Math.cos(Math.toRadians(angle)));
y[i] = (int) (y0 + r * Math.sin(Math.toRadians(angle)));
}
for(int i = 0 ; i < noOfDividingPoints ;i++)
{
Log.v("x",""+i+": "+x[i]);
Log.v("y",""+i+": "+y[i]);
}
}
Where x0 and y0 are co ordinates of circle's centre.and r is radius.
In my case:
Input x0 = 0 , y0 = 0 and r = 150 , noOfDividingPoints = 5
output
point1: (150,0)
point2: (46,142)
point3: (-121,88)
point4: (-121,-88)
point5: (46,-142)
You need to convert between polar and Cartesian coordinates. The angle you need is the angle between the (imaginary) vertical line that splits the circle in half and the line that connects the center with the circle's boundary. With this formula you can calculate the X and Y offsets from the center.
In your example image the first angle is 0, and the second one is 360/n. Each next is i*(360/n) where i is the index of the current line you need to draw. Applying this will give you the X and Y offsets in a clockwise order (and you can just add them to the X and Y coordinates of the center to find the coordinates of each point)
EDIT: some kind of pseudo-code:
//x0, y0 - center's coordinates
for(i = 1 to n)
{
angle = i * (360/n);
point.x = x0 + r * cos(angle);
point.y = y0 + r * sin(angle);
}
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
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.
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.
Here is a good code, its not mine, It was a Java Graphics2D code that I converted to Canvas. All credit go to the original guy/lady who wrote it
private void drawArrowHead(Canvas canvas, Point tip, Point tail)
{
double dy = tip.y - tail.y;
double dx = tip.x - tail.x;
double theta = Math.atan2(dy, dx);
int tempX = tip.x ,tempY = tip.y;
//make arrow touch the circle
if(tip.x>tail.x && tip.y==tail.y)
{
tempX = (tip.x-10);
}
else if(tip.x<tail.x && tip.y==tail.y)
{
tempX = (tip.x+10);
}
else if(tip.y>tail.y && tip.x==tail.x)
{
tempY = (tip.y-10);
}
else if(tip.y<tail.y && tip.x==tail.x)
{
tempY = (tip.y+10);
}
else if(tip.x>tail.x || tip.x<tail.x)
{
int rCosTheta = (int) ((10)*Math.cos(theta)) ;
int xx = tip.x - rCosTheta;
int yy = (int) ((xx-tip.x)*(dy/dx) + tip.y);
tempX = xx;
tempY = yy;
}
double x, y, rho = theta + phi;
for(int j = 0; j < 2; j++)
{
x = tempX - arrowLength * Math.cos(rho);
y = tempY - arrowLength * Math.sin(rho);
canvas.drawLine(tempX,tempY,(int)x,(int)y,this.paint);
rho = theta - phi;
}
}
Just call this for both sides of your line and it will draw an arrow at each side!
There is an ImageView and it has an Image, which has been zoomed and rotated.
See the picture:
The image is scaled by android.graphics.Matrix.
You can see there is red point which is the center point of the image, and also a blue border. How to calculate them?
(Update: I want to operate on the image of the girl inside the blue border, not the whole picture, that's background)
There is a mathematical dependency between two. If there is other information available:
-assuming rectangle has right angles for all corners-.
center.X = (aCorner.X + oppositeCorner.X)/2;
center.Y = (aCorner.Y + oppositeCorner.Y)/2;
Where aCorner is a arbitrary corner and oppositeCorner is opposite corner to aCorner.
This was trivial, a little more hard work included to calculate borders (and a bit more of information; center position, width and the height of the picture and rotation angle).
Assuming image's width is "w", height is "h", angle is "a", and center "cX" and "cY".
First corner;
length = sqrt(w^2+h^2)/2;
x = (length)*(cos(a)*(-w/length) - (h/length)*sin(a)) + cX;
y = (length)*(sin(a)*(-w/length) + (h/length)*cos(a)) + cY;
Second corner;
x = (length)*(cos(a)*(w/length) + sin(a)*(h/length)) + cX;
y = (length)*(cos(a)*(h/length) - sin(a)*(w/length)) + cY;
Third;
x = -(length)*(cos(a)*(-w/length) + (h/length)*sin(a)) + cX;
y = -(length)*(sin(a)*(-w/length) - (h/length)*cos(a)) + cY;
Fourth;
x = -(length)*(cos(a)*(w/length) - sin(a)*(h/length)) + cX;
y = (length)*(cos(a)*(h/length) - sin(a)*(w/length)) + cY;
Length is a half of diagonal of the rectangle. The inner part with cos and sin is result of trigonometric transformation:
sin(a+b) = sin(a)*cos(b) + cos(a)*sin(b)
[....]
And cX and cY is used to translate corners from a arbitrary coordinate system to a specific coordinate system.
I know, I know this was kind of overkill. Matrix class may have this functions on its own. I believe if it has, the method used in it can be broken into method I described here.
NOTE: Angle a -actually even sin(a) and cos(a), which is better- can be accessed via
Matrix.getValues(float[] values)
Most 2D matrices use this scheme:
| sin(a) 0 0 |
| 0 -cos(a) 0 |
| 0 0 scale|
I am not sure about particular implementation of Android API.
BTW, there may have been some signature errors up there so be careful.
I use this method to add a Sprite to the screen randomly.
private void addFace() {
Random rand = new Random();
float x = (int) mCamera.getHeight() + mBallTextureRegion.getHeight();
float minY = mBallTextureRegion.getHeight();
float maxY = (int)(mCamera.getWidth() - mBallTextureRegion.getWidth());
float rangeY = maxY - minY;
float y = rand.nextInt((int)rangeY) + minY;
this.mFaceCount++;
Log.e("Faces: ", "Face" + this.mFaceCount);
Sprite face = null;
Body body = null;
The only problem is i would like for the sprites to be added at the top of the screen(which is the camera) but instead they are added on the side of the screen.
Any suggestions on how to do this?
First of all, the (x,y) coordinates of an entity are on it's top left. So, minY should be 0, or you could just do:
float y = rand.nextFloat(maxY);
You don't need all of these (int) casts, you can delete them.
In order to make to position random, get a random X too:
float maxX = this.mCamera.getWidth() - this.mBallTextureRegion.getWidth();
float x = rand.nextFloat(maxX);
This should work.
On the android screen, the origin of the coordinate system is in the upper left corner.
(0,0)......(1,0)
(0,1)......(1,1)
So if you want something to always spawn at the top of the screen, then Y will need to be 0. Always. the X value can be anything from 0 to the width, randomly. This will place the object at the top, and randomly in the X (left-right) direction
I'm trying to draw a rectangle with rounded corners. I have a javascript path that does this, but the javascript arcTo method takes a rectangle (to define its oval) and then one param which sets the sweep.
However, in the Android version there are three params. the rectangle oval (which I think I have defined correctly) and then the startAngle and sweepAngle (which I'm not understanding the usage of), but my arcs don't look anything like what I'm expecting when I noodle with how I'm guessing they should work.
Does anyone know of a good tutorial on this?
Specifically I'm trying to understand what would the two params look like if I was trying to draw an arc (on a clock face) from 12 - 3, and then assuming I had a line that ran down from the 3 and then needed to round the corner from 3 to 6 and so forth.
Here's my code (disregard the arc numbers in there now... that's just the latest iteration of my guessing at how this may work, having failed on the previous, more sensible attempts):
Path ctx = new Path();
ctx.moveTo(X+5,Y); //A
ctx.lineTo(X+W-5,Y);//B
ctx.arcTo(new RectF(X+W, Y, X+W, Y+5), -180, 90); //B arc
ctx.lineTo(X+W,Y+H-5); //C
ctx.arcTo(new RectF(X+W,Y+H,X+W-5,Y+H),90,180); //C arc
ctx.lineTo(X+W/2 +6,Y+H);
ctx.lineTo(X+W/2,Y+H+8);
ctx.lineTo(X+W/2-6,Y+H);
ctx.lineTo(X+5,Y+H);
ctx.arcTo(new RectF(X,Y+H,X,Y+H-5),180,270);
ctx.lineTo(X,Y+5);
ctx.arcTo(new RectF(X,Y,X+5,Y),270,0);
Paint p = new Paint();
p.setColor(0xffff00ff);
canvas.drawPath(ctx, p);
much obliged.
odd that no one piped in with an answer, once I found it (it wasn't easy to find) it was really straight forward.
So, the way it works is this:
Assuming you want to draw a rounded corner at 12 - 3 (using clock reference):
you start your path and when you need the line to arc you define a rectangle whose upper left corner is the place where your line is currently terminated and whose lower right corner is the place that you want the arc to go to, so if you imagine a square whose X,Y is 12 (on the clock) and whose X+W,Y+H is 3 that's the square you need.
Now, imagine that you have an oval in that square (in this example it's a circular oval, if you want your curve to be more oval-ish, then define your square as a rectangle), you can take any slice of that circle using the last two params of the method. The first param defines the angle where you want to start cutting. If we're using a compass, 0 degrees is East (not sure why, I'm not a geometry expert... is this normal? I always think of 0 being North, but all the programming geometry examples I see have 0 as East, maybe someone will comment on why that is).
The second param defines how much of the circle you want. If you want the whole circle you put 360 if you want half the circle you put 180 etc.
So, in our case since we want to round the corner from 12 to 3, we put 270 as our starting degree and grab 90 degrees of the circle.
Lastly, when you're done with this process, the line now thinks of itself as being at 3pm so you can continue lineTo(ing) from there.
So... here's my fixed code for my shape (it has a little triangle in it, but that's neither here nor there, the actual rounded parts are B-C, D-E, I-J, and K-A. All the rest are straight lines.
int arc = 25;
public Cursor(int X, int Y, int W, int H){
/*
* A B
* K C
* J D
* I H F E
G
*/
int Ax = X+ arc;
int Ay = Y;
int Bx = X + W - arc;
int By = Y;
int Cx = X + W;
int Cy = Y + arc;
int Dx = Cx;
int Dy = (Y + arc) + (H - arc*2);
int Ex = Bx;
int Ey = Y + H;
int Fx = X+W/2 +6;
int Fy = Ey;
int Gx = X+W/2;
int Gy = Y+H+8;
int Hx = X+W/2-6;
int Hy = Ey;
int Ix = Ax;
int Iy = Hy;
int Jx = X;
int Jy = Dy;
int Kx = X;
int Ky = Cy;
Path ctx = new Path();
ctx.moveTo(Ax,Ay); //A
ctx.lineTo(Bx,By);//B
ctx.arcTo(new RectF(Bx, By, Cx, Cy), 270, 90); //B-C arc
ctx.lineTo(Dx,Dy); //D
ctx.arcTo(new RectF(Dx - arc, Dy, Ex + arc, Ey),0,90); //D-E arc
ctx.lineTo(Fx, Fy); //E-F
ctx.lineTo(Gx, Gy); //F-G
ctx.lineTo(Hx, Hy); //G-H
ctx.lineTo(Ix, Iy); //H - I
ctx.arcTo(new RectF(Jx, Jy, Ix, Iy),90,90);// I = J arc
ctx.lineTo(Kx, Ky); //K
ctx.arcTo(new RectF(Ax - arc, Ay, Kx + arc, Ky),180,90); //K - A arc
ctx.lineTo(Ax, Ay); //K
Paint p = new Paint();
p.setAntiAlias(true);
p.setColor(0xffffffff);
p.setStyle(Style.FILL);
canvas.drawPath(ctx, p);
p.setColor(0xff000000);
p.setStyle(Style.STROKE);
p.setStrokeWidth(3);
canvas.drawPath(ctx, p);
}
This answer visually explains all arcTo parameters using four examples.
arcTo takes the following parameters:
public void arcTo(RectF oval,
float startAngle,
float sweepAngle,
boolean forceMoveTo)
where RectF's constructor takes:
RectF(float left, float top, float right, float bottom)
(Hopefully this visualization is less painful and less mystifying than reading the official arcTo documentation.)
Thanks for this example, it makes the parameters very clear to understand.
From what I read in the dev docs of Android you can probably spare yourself some of the "lineTo()" calls (except those to points F,G,H), since arcTo automatically adds a lineTo when the first point of the arc is not the last point drawn...
As for why 0 starts East, it is so because of math and trigonometry lessons generally assume that the 0 degrees mark is the point where the trigonometric circle (circle with center 0,0 and radius 1) intersects with the X-axis, which is East (these same lessons however generally count the angles counter-clockwise, so 90 degrees becomes north and 270 is south, whereas on Android it seems the angles are counted clockwise)
Here's some sample code (pieced together from one of my classes) to draw a filled, rounded corner rectangle and then adding a stroked rectangle to give it a border:
//Initializing some stuff
_paint = new Paint();
_rect = new RectF();
_radius = 10;
_bgColor = 0xFFFFFFFF;
_borderColor = 0xFFCCCCCC;
//Doing dimension calculations
_rect.left = 0;
_rect.top = 0;
_rect.right = this.getWidth() - 1;
_rect.bottom = this.getHeight() - 1;
//painting
//draw the background
_paint.setColor(_bgColor);
_paint.setStyle(Style.FILL_AND_STROKE);
canvas.drawRoundRect(_rect, _radius, _radius, _paint);
//draw the border
_paint.setStrokeWidth(1);
_paint.setColor(_borderColor);
_paint.setStyle(Style.STROKE);
canvas.drawRoundRect(_rect, _radius, _radius, _paint);