如何转换canvas / raphael.js的flash circle对象坐标？

Question

我有一些简单的flash动画，我正在转换为HTML5图像映射，触发一些<area>翻转的绘图。

问题是所有的圆圈（代表翻转点）都作为闪光圆对象坐标给我。有问题的点是在从圆的最顶部和最左边的点（由下图中的红色虚线标记）的虚线连接处形成的。

但是要在HTML5中绘制我的圈子（目前使用raphael.js），我必须给出一个中心坐标：var c = paper.circle(x, y, radius)。

因此，例如，如果我有闪光圆圈对象（532.20,30.35），其高度和宽度为19.80（再次从虚线相交的点），我如何计算绘制圆圈所需的值它在画布的中心点？

Answer 1

您只需从x和y中减去半径：

x = x - radius;
y = y - radius;

在你的情况下：

radius = 19.8 * 0.5
x = 532.2 - radius;
y = 30.35 - radius;

这将在原始x和y处绘制圆 center （它会向左和向上移动圆圈）。

如果您希望圆与原始圆处于有效相同位置但必须移动坐标系，则需要添加半径。