I have a pie chart which is drawn in HTML5 canvas .. I am retrieving the Point (X,Y) on mouse over .. Now i want to know whether the Point (X,Y) is in which slice of the pie chart ..
Note :
I have already found whether the Point(X,Y) is inside the pie chart or not
Known values :
Center of Pie Chart (Cx,Cy)
Start and End angle of each arc or slice
Piechart radius (R)
Start and End points of the arc or slice
So, we know the angle where a slice starts. We know the center and point (x,y).
Let's assume the origin is (0,0) and we draw a line from there to point (x,y) . The angle between the x-axis and the line will be tan^-1(y/x).
Once we know the angle it's a simple calculation to see between which arc section it lies, since we know the start and ending angles of each slice.
If the origin is not (0,0) you can make it so with some simple math.
Related
I get two (xy) coordinates dynamically, one defining the start and another defining the end of a curve. In order to generate a Bezier curve between them, I want to define a third (xy) coordinate as control - with a third point, I can draw a a Bezier curve perfectly, but my problem is that I do not know how to get the coordinate for the control point (xy).
For a line drawed by the xy start point and the xy end point (black line) I find one point in the coords xy (yellow circle) formed by the cross of drawing a intersection line (green line) in the middle of the line given and a 45 degrees staring in the xy start point (red line).
I added a image example to explain it better.
I have a series of circles which are randomly positioned on the scene (x,y). I was wondering if anyone knew of a solution to make sure that when randomly placed, the circles would not overlap.
In your loop when you place circles, take the randomized (x,y) coordinate, and get the distance to all of the existing circles (another loop) --> √((x1-x2)^2 + (y1-y2)^2), if the distance is greater than the radii of both circles added together for EVERY circle, then you can place the circle, otherwise they overlap.
A statement checking to each circle's co-ordinates plus and minus its radius does not come within the co-ordinates of another circle plus and minus its radius in both the x and y direction could work
I'm implementing some basic annotation draw features, such as arrows. Now I'm a little bit stuck with ellipse.
The methods to draw an ellipse usually address using it's two diameters and eventually a rotation:
However I want to display the ellipse between the point user clicked and the one he's hovering, therefore I need a function that calculates diameters and rotation based on two points:
How would I do that? Can it be achieved with sufficient performance (as it renders during mouse-hovering)?
the steps you shoul follow:
get the angle of the line (from this post: get angle of a line from horizon)
rotate the canvas or at least the part you currently drawing (live demo here: http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial)
draw an ellipse in canvas (http://www.scienceprimer.com/draw-oval-html5-canvas)
the resulted ellipse will be transformed as described
It can be done in the same way that it is normally done, just using different math to calculate the shape. Without writing the entire code for you, you can start by having an event trigger when the user clicks the mouse button down. The function will copy the users x and y position based on the screen. Then there is a second function which will handle mouse movement. This function will keep track of the x and y coords of the mouse while it is in motion. The final function will be a mouse up event, when a user lifts their finger from the mouse button (assuming this is when the event should be finished). Using the initial and final position of the x and y coordinates, you can calculate the length of the line the user created. That line is the long diameter of the ellipse. Half this number for the large radius. Then use whatever ratio you are using to calculate the smaller radius from the larger one. Then create an ellipse based on these numbers.
For the math: Suppose your first point is x1,y1 and the end point is x2,y2
I'm also assuming that we have a line going from bottom-left to top-right
Distance between two points = sqrt((x2-x1)^2 + (y2-y1)^2) ---> (we will call this d1)
half of this is the length of the large radius ---> (we will call this r1)
Midpoint formula = ((x1+x2)/2 , (y1+y2)/2) ---> axis of rotation (we will call it (m1, m2))
distance from midpoint to end is just the radius
radius is now the hypotenuse of constructed plane, y2-m2 is height of right triangle.
Find the angles between midpoint and one end of larger radius - sin((y2-m2)/r1).
Angle of smaller radius is this angle + pi/4 radians.
calculate length of smaller radius based on ratio.
Can either arc between two arbitrary points on the circumference of circle be deleted by clicking on the first and second point on circumference respectively?
If you know the centerpoint of the circle it's fairly easy.
You can draw your new arc like this using a custom Kinetic.Shape:
context.arc(cx,cy,radius,startAngle,endAngle,sweepCounterclockwise)
Where:
cx,cy: The centerX/centerY of the existing circle are the cx,cy of the new arc.
radius: Use the distance formula to calculate the radius: Math.sqrt(dx*dx+dy*dy).
angles: Use Math.atan2 to calculate the 2 angles of the clicks vs the circles centerpoint.
sweep: Use the counterclockwise option to draw the new arc with a big or little swing.
I am trying to smoothen the transition from a diagonal line to a horizontal line by using arcs of circles that I calculate with a little calculus. The problem I am running into is that it seems as though I can't get the arcs to be positioned correctly.
For example: jsfiddle.net/5Wa9e/2
It might just be a problem with my calculations but from "inspection" it seems as though I have the right circles. I want the red points on the right to always be at the bottom of the circle at the point where the tangent is horizontal.
I am using: A#{radius},#{radius} 0 0 0 #{curveEndX},#{curveEndY}" to define the arc. Am I missing something?
--edit--
It was just my math. Turns out the arcs I see are just fallback mechanisms for when the SVG renderer can't find a circle matching my constraints.
--edit--
end result: jsfiddle.net/5Wa9e/2