Tuesday, 10 September 2013

Translating flash info box into coordinates for html5 canvas shape?

Translating flash info box into coordinates for html5 canvas shape?

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.

No comments:

Post a Comment