I'm not having a good day I think, and I'm struggling with an issue I think it should be easy.
I have to draw a circle while dragging the mouse. The users clicks and holds, drags the mouse, and release the button.
But:
1) I have the coordinates of the mousedown event, and the current ones (x1, y1, x2, y2). This ones defines a rectangle.
2) (x1, y1) must be the center of the circle, and it radius must be the distance between x1, y1 and the current ones.
3) I have to show the current radius (the value; not the line itself).
4) The user must be able to draw the circle dragging left, right, upwards, downwards, and any intermediate combination.
Thank you very much!
PS: As an option (example, if the user drags while shift key is pressed), the rectangle should be a square and a circle should be drawn instead of an oval.
(wagering that 0,0 is left upper corner otherwise invert 1 and 2; x1/y1 is buttondown is center)
radius = sqrt((x1-x2)^2 + (y1-y2)^2)
x_leftuppercorner = x1 - radius
y_leftuppercorner = y1 - radius
x_rightlowercorner = x1 + radius
y_rightlowercorner = y1 + radius
dCircle(x_luc, y_luc, x_ruc, y_ruc)
Related
I am new to libGDX.I just want a Rectangle or a small curve drawn between the object and the clicked position .I know libGDX has RECTANGLE class but I need to rotate it but the problem is, it gets rotated in center origin and i want to rotate it from its starting position.
I just want to draw a rectangle or a curved line to be drawn between the object and the clicked position like this >>>
Code to get user click position :
int x1 = Gdx.input.getX();
int y1 = Gdx.input.getY();
Code to get the width(distance) between the object and the clicked position :
float abwidth = x1 - position.x;
Code to compute the rotation :
float f1 = Math.abs(y1 - position.y);
float f2 = Math.abs(x1 - position.x);
abwidth = Math.abs(abwidth);
float abdegree = Math.toDegrees(Math.atan((f1)/(f2)));
abdegree = abdegree * (-1);//done this because it was giving the opposite rotation i dont know if this is wrong but it made the angle upwards
The above computed degree when put in the following code -- > shapeRenderer.rect(x,y,width,height, 0, 0, abdegree ); is not giving me the perfect angle So what would be a perfect way to rotate the straight horizontal rectangle to the click position.
Or is there any way of achieving this in some other way instead of using rectangle like using curve or something else ?
You can use this class for rendering shapes
and it has
rect(float x, float y, float width, float height, float originX, float originY, float rotation)
method for drawing rectangles
set originX,originY to 0,0 or other numbers to change rotation origin point
I created a circle using canvas and divided it into lines. I want the coordinate of a particular area: if I click a particular area, that alone should be clickable.
Take an example of a word wheel game where a circle is divided into many areas with different
coordinates and some letters placed inside the divided areas. If I want to click the particular area with the letter 'A', the 'A' should be clicked and should be displayed in a text box.
How do I accomplish this?
Hope the following gets you started.
Note that " the particular area with the letter 'A' " is called a sector of the circle.
Assume
the x axis is horizontal and positive to the right
the y axis is vertical and positive downwards
angles are measured in radians clockwise from the positive x axis
the first sector starts at angle A
centre of circle is at (cx,cy) and has radius r
the circle is divided into n equal sectors
the cursor is at the position (x,y)
the predefined function Math.atan2(y,x) returns the angle (from -pi and pi) between the positive x axis and the line segment from (0,0) to (x,y)
where i is and integer and i<= x < i+1 the predefined function Math.floor(x) returns i
Then
Let S be the angle at the centre for each sector
S=2*pi/n
Create a function getangle(x,y,cx,cy) which returns the angle from 0 and 2pi between the horizontal line through (cx,cy) in the positive x direction and the line segement from (cx,cy) to (x,y)
Pseudocode
function getangle(x,y,cx,cy)
{
var ang = Math.atan2(y-cy,x-cx)
if(ang<0)
{
ang+=2*Math.PI
}
return ang
}
Now you can create a function to check which sector, if any, the cursor lies in.
Return -1 if cursor is outside the circle, sector number from 1 to n otherwise.
Pseudocode
function isInSector(x,y) (x,y) coordinates of cursor
{
// first check if cursor is outside of circle
if((cx-x)*(cx-x)+(cy-y)*(cy-y)>r*r)
{
return -1
}
// find angle for cursor position
B=getangle(x,y,cx,cy)
return Math.floor((B-A)/S)+1
}
I have a square canvas with a width of 100 and a height of 100.
Within that square I draw an arc like so:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,100,100) // clears "myCanvas" which is 100pixels by 100 pixels
ctx.beginPath();
ctx.arc( 50, 50, 30, 0, Math.PI*2/6 , false )
ctx.stroke();
The question is: How do i get the x/y coordinates of the first and last points of the drawn line relative to the top left corner of the canvas?
The starting point is trivially (x + radius, y). The ending point is, by simple trigonometrics, (x + radius*cos(angle), y + radius*sin(angle)). Note that the starting point in this case is a special case of the more general ending point, with angle equal to zero. These values also need to be rounded to the nearest integer, for obvious reasons.
(Note that this applies only when the anticlockwise argument is false, and assuming all coordinates are measured from the top left. If anticlockwise is true, reverse the sign of the second component of the y coordinate. If coordinates are measured from another corner, apply simple arithmetics to correct for this. Also note that this is completely backwards for any real mathematician.)
I'm not a genius in geometry, I'd like to find a point in as3 with the radius and a angle but I don't remember the rule, I know this should be simple!
Here's an example:
alt text http://img297.imageshack.us/img297/4879/examplepr.png
as3.x = centerX + radius * cos(angle)
as3.y = centerY + radius * sin(angle)
Note that the rotation in the picture linked to is in the "negative direction". I.e, an increase of the angle, yields a counter-clockwise rotation.
Let x0, y0 be the center of the circle being considered and t be the angle theta anti-clockwise from the x-axis (right horizontal).
The point you are looking for is then
x = x0 + r*cos(t)
y = y0 + r*sin(t)
You have to adjust your calculator to degree mode before making that calculation
more likley you will use angle in degree
When rotating a display object (around its center) the visual corner of the element moves (the actual x and y of the "box" remains the same). For example with 45 degrees of rotation the x coordinate will have increased and the y coordinate will have decreased as the top left corner is now at the top center of the "box".
I've tried to use displayObject.getBounds(coordinateSpace).topLeft however this method is simply returning the x and y of the box and thus doesn't change after an object has been rotated.
So, how do you get the x and y of a visual corner of a rotated display object?
Update: this is what I mean with the position of a visual corner after rotation -->
alt text http://feedpostal.com/cornerExample.gif
You simply need to translate the point to its parent's coordinate space.
var box:Shape = new Shape();
box.graphics.beginFill(0xff0099);
box.graphics.drawRect(-50, -50, 100, 100); // ... the center of the rectangle being at the middle of the Shape
addChild(box);
box.x = 100; // note: should be 100 + box.width * .5 in case you want to use the topleft corner to position
box.y = 100;
box.rotation = 45;
// traces the result (Point)
trace( box.parent.globalToLocal(box.localToGlobal(box.getBounds(box).topLeft)) );