I have some simple flash animations that I am converting into HTML5 image maps, that trigger some drawing upon <area> rollovers.
Problem being is that all the circles (representing roll-over points) are given to me as flash circle object coordinates. The points in question are formed at the joining of imaginary lines that go from the circle’s topmost and leftmost points (marked by the dashed red lines in the image below).
But to draw my circles in HTML5 (using raphael.js currently), I have to to give a center coordinate: var c = paper.circle(x, y, radius).
So, for example, if I have flash circle object (532.20,30.35) with a height and width of 19.80 (again from the point where the imaginary lines intersect) how can I calculate the values I need for drawing a circle at its center point in the canvas?
You just subtract the radius from the x and y:
x = x - radius;
y = y - radius;
In your case:
radius = 19.8 * 0.5
x = 532.2 - radius;
y = 30.35 - radius;
This will draw the circle center at the original x and y (it moves the circle left and up).
If you want the circle in the effectively same position as the original but have to move the coordinate system then you add radius instead.
Related
I want to draw a pipeline image (below) like draw a line, that follow the mouse cursor. When I press down the left button,and move the mouse cursor,the pipeline image draw to the cursor position （Like bessel curve)
. How can I do that? Thank you!
Here’s an example of how to define a “tube” given some mouse points.
The red points connected by red lines represent your mouse points.
The green & blue lines are calculated to be parallel to the red mouse line with an offset of 15 pixels.
The green & blue lines form the outside of your tube.
I'll help you with the math, but styling your tube is up to you.
Requires some trigonometry...ready?
Given that your mouse travels along a polyline (a series of points connected by line segments). Your mouse points are the red line in the illustration.
At each point, calculate 2 points perpendicular to that point and on either side of that point.
When you connect these perpendicular points, they become the sides of your "tube". These are the green & blue lines on either side of the mouse line.
How:
Use Math.atan2 to calculate the angle of slope between [x1,y1] and [x2,y2].
var dx=x2-x1;
var dy=y2-y1;
var originalAngle=Math.atan2(dy,dx);
Use Math.cos/Math.sin to find 2 points perpendicular to [x1,y1]
// a perpendicular angle is always 90 degrees different
// from the angle of the original line.
// (90 degrees == Math.PI/2 radians)
// let's subtract 90 degrees
var perpendicularAngle=originalAngle-Math.PI/2;
// let's get a perpendicular point that's
// 15 pixels away from [x1,y1]
var offsetLength=15;
// use cosine and sine to calculate that perpendicular point
var perpX1=x1+offsetLength*Math.cos(perpendicularAngle);
var perpY1=y1+offsetLength*Math.sin(perpendicularAngle);
// repeat to get the opposite perpendicular point
// This time add 90 degrees to the original angle.
var perpendicularAngle=originalAngle+Math.PI/2;
var perpX2=x1+offsetLength*Math.cos(perpendicularAngle);
var perpY2=y1+offsetLength*Math.sin(perpendicularAngle);
One edge issue you must work around: If the angle of slope is either horizontal or vertical, the cosine/sine calculation won't work. Instead, just add/subtract the offset length to the point.
The math part is done!
Now just style the data-points as you desire. Maybe connect the perpendicular points on each side of the mouse line to form the sides of your tube. Apply some semi-transparent fill to allow the background to show through. Whatever your design requires.
Good luck with your project!
I'm trying to recreate some flash shapes that appear on rollover upon a circle symbol. I'm needing to convert flash x and y points to the canvas coordinate grid. I figured out how to convert the circle coord points. However, the info I'm given for the shapes that appear on rollover make no sense to me.
For example, take this rollover point, where the dimensions refer to the registration point (little cross in the upper left):
x = 532.30
y = 30.35
w/h = 19.80
But based off this, the info I get for the rectangle that appears on rollover makes no sense:
x = -7.30
y = 17.30
w = 29.0
h = 16.5
I figured this meant that the rectangle's upper left point was 7.30 pixels to the left, and 17.30 pixels down from the registration point of the circle. Is that right? What origin are these x and y coordinates based off of?
The width and height are completely confusing to me though. The given width is 29.0, but this can't be right. If I get x and y coordinates just using my cursor, its clear that the rectangle is much wider than this:
564 - 521 = 43
43 != 29
Please help me understand the mysterious info box I'm being presented with for this rectangle. I just need to get some vanilla coordinates for it so I can draw it on the HTML5 canvas.
What origin are these x and y coordinates based off of?
These x and y coordinates are based off of the registration point of tab button.
43 != 29
When you work with symbols on a stage, the symbols that you're working with aren't the actual original Library symbol. They're copies that can be manipulated by scaling them, applying color and opacity effects and...
This instance of tab button is scaled, if you open library panel and edit tab symbol you can see the actual size.
UPDATE
after I change width and height of tab button to 19.80:
29*(150/100)=43.5
I am working on code to find the points on the circumference of a circle. I have the center point of the circle and the radius and I need to draw a circle around it. This will help me define the boundary. Please help me with formula for finding the these points on the circumference.
For a circle with origin (j, k) and radius r:
x(t) = r cos(t) + j
y(t) = r sin(t) + k
where you need to run this equation for t taking values within the range from 0 to 360, then you will get your x and y each on the boundary of the circle.
For more information:
http://www.math.com/tables/geometry/circles.htm
I am trying to make a donut chart using the arc function in the HTML5 canvas. I am wanting to know how to use the lineTo function to connect two arcs together.
At the moment I have a pie chart which has fixed central x/y coords, so making the slices is easy as once the arc of each slice is done, the lineTo method simply uses the the fixed coords.
However with a ring/donut chart, I have two arcs, one with a smaller radius, but no idea how to connect the ends together without horrifically complicated trigonometry. Is there any way to get the 'start' and 'end' x/y coords of the arc?
I have a current hackyish 'solution' of simply drawing a smaller white circle over the pie chart to give the ring graph, but I want to know the answer to the question above.
You just have to remember a little trigonometry. If your center point is x, y and radius is r; then the coordinates on the circle at an angle alpha are:
pointX = x + Math.cos(alpha) * r;
pointY = y + Math.sin(alpha) * r;
And you have two of those angles, corresponding to the starting and the ending point.
Why are you drawing arcs? Would'nt it be easier if you just draw the circle (or circles for the ring) and then draw radius?
I have a task:
I need to place about 100 sprites on one canvas (with prepared grid on it). I need to place them as invisible (circles) stones, on the board, and make visible only on mouseover.
The problem I come across is following, I can't place those objects accurately into the nodes on the grid.
E.g.
if I define stones (it's just a sprite, as I said earlier) this way:
var stone:StoneSprite = new StoneSprite();
stone.x = this.x + 2*cellWidth;
stone.graphics.beginFill( 0x000000 );
stone.graphics.drawCircle(stone.x , this.y + cellWidth, cellWidth/3 );
stone.graphics.endFill();
rawChildren.addChild(stone);
They don't sit on the node...
See image:
http://img.skitch.com/20091014-kuhfyjeg1g5qmrbyxbcerp4aya.png
And if I do it this way:
var stone:StoneSprite = new StoneSprite();
stone.graphics.beginFill( 0x000000 );
stone.graphics.drawCircle(this.x + 2*cellWidth , this.y + cellWidth, cellWidth/3 );
stone.graphics.endFill();
rawChildren.addChild(stone);
The stone is displayed correctly in the grid node... See image 2:
http://img.skitch.com/20091014-f595tksjxramt98s7yfye591bh.png
So I wonder what is the difference between these 2 approaches.
Also, I think I need to pass correct coordinates to the stone class... In case I would like to change some properties of the stone object. E.g. visibility, or radius.
Could you please suggest, what's wrong in defining coordinates as stone.x, stone.y
How to fix the problem with incorrect positioning.
Would really appreciate ideas about the problem, I am trying to solve for so long :(
Assume x & y are 30 and cellWidth is 30.
First Example:
stone.x = 30 + 60; //90
drawCircle(90, 60, 10);
This means if you were to draw a rectangle around your circle, it would be at [170,50]. (x,y).
Second Example:
stone.x = 0;
drawCircle(90, 60, 10)
This means the rectangle around your circle is at [80,50];
In the first example, you are moving the sprite to position x==90. Then drawing a circle whose center is at x==90 inside the sprite. So relative to this, you're at x==180. But because a circle's x,y coords are the center, subtract 10 for the radius to get the boundary x position.
In the second example, the sprite defaults to position x==0 relative to this and you're drawing the circle inside the sprite at position x==90. (therefore it begins at x==80).
I am not sure what's causing the issue - might be some padding induced by the container - can't say without testing. But I believe that adding a Sprite (say board) to canvas.rawChildren and using it as the parent for the grid and stones would fix the issue.