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.)
Related
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)
Im having issue with clearRect, i have an image u can move up and down and which follow the angle where the mousse is but in some frames of the animation the clearRect let a small edge of the previous image state ( 'this' reference to the image and 'ctx' is the 2d context, 'this.clear()' is called each frame before redrawing the image at the new coordinates )
this.clear = function(){
game.ctx.save();
game.ctx.translate(this.x+this.width/2, this.y+this.height/2);//i translate to the old image center
game.ctx.rotate(this.angle);//i rotate the context to the good angle
game.ctx.clearRect(this.width/-2, this.height/-2, this.width, this.height);//i clear the old image
game.ctx.restore();
};
if i replace the clearRect line by
game.ctx.clearRect(this.width/-2-1, this.height/-2-1, this.width+2, this.height+2);
it works but its not the logical way
The problem is that you are only clearing at position half the width/height, not position minus half the width/height.
Regarding anti-aliasing: when you do a rotation there will be anti-aliased pixels regardless of the original position being integer values. This is because after the pixels relative positions are run through the transformation matrix their offsets will in most cases be float values.
Try to change this line:
game.ctx.clearRect(this.width/-2, this.height/-2, this.width, this.height);
to this instead including compensation for anti-aliased pixels (I'll split the lines for clearity):
game.ctx.clearRect(this.x - this.width/2 - 1, /// remember x and y
this.y - this.height/2 - 1,
this.width + 2,
this.height + 2);
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
}
You are given the radius of a circle, as well as a point P in the circle( x,y), how do you write a function to return an x number of points( x,y), all on the circumference of the given circle. Also, how do you go about finding the angle between each generated point and point P.
I assume you would want the points on the circumference to be evenly distributed along the circumference. If this is the case, you can calculate the number of degrees between each point by dividing 360 by the number of points that you want.
Then, you can obtain any point's (x, y) coordinates as such:
(x, y) = (cos(angle), sin(angle))
where 'angle' the is the angle for the given point. (This is assuming you want values between -1 and 1, as is the case with a unit circle: http://en.wikipedia.org/wiki/Unit_circle) For example, if you want 4 points along the circle's circumference, you can calculate that there is exactly 360/4 = 90 degrees between consecutive points.
So let's call these points point0, point1, point2 and point3. Point0 is at an angle of 0 degrees, point1 at 90 degrees (1 * 90), point2 at 180 (2 * 90) and point3 at 270 (3 * 90). The coordinates for each point are then:
point0 = (cos(0), sin(0)) = (1, 0)
point1 = (cos(90), sin(90)) = (0, 1)
point2 = (cos(180), sin(180)) = (-1, 0)
point3 = (cos(270), sin(270)) = (0, -1)
Keep in mind that you normally start measuring angles on the right side of the horizontal axis of a circle. (On a clock: At the 3)
EDIT: Also please note that almost all trigonometric functions in programming take radian values instead of degrees. Radians can be hard to think with, however, which is why it's very useful to know how to convert radians and degrees to eachother. To convert degrees to radians, multiply the degree value by (pi/180). To convert radians to degrees, multiply the radian value by (180/pi). There is a reasoning behind this all, so if you would like to know more about this, I suggest you read up on radians. http://en.wikipedia.org/wiki/Radian
As far as the angle between these points and the point P goes; I will only give you some directions. You can calculate the x- and y-differences between the points and point P (this should be trivial for you, it consists of mere subtractions). Using these two values, you can calculate the angle between the points.
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)) );