Javascript Raphael.js在拖动时有奇怪的行为

我有一个从圆心到边的圆。用户可以单击并拖动直线，并从设置直线的任何位置获取角度。我正在使用答案中的代码，并相应地调整了代码

一切正常，但拉斐尔影响的元素在页面下方越远，鼠标必须离圆圈越远才能拖动线条

var canvas=Raphael（'pivot'，0,0320320）；
var clock=canvas.circle（200150100）.attr（“笔划宽度”，2）；
canvas.circle（200150,3）.attr（“fill”，“#000”）；
var angleplus=360，
rad=Math.PI/180，
cx=200，
cy=150，
r=90，
startangle=-90，
角度=90，
x、 y，端角；
对于（i=1；i<5；i++）{
endangle=星形缠结+角度；
x=cx+r*Math.sin（端角*rad）；
y=cy-r*Math.cos（端角*rad）；
canvas.text（x，y，endangle）；
startangle=端角；
}
var hand=canvas.path（“M200 50L200 150”）.attr（“笔划宽度”，5）；
手动拖动（移动、开始、结束）；
功能移动（dx、dy、x、y）{
var pt=this.node.ownerSVGElement.createSVGPoint（）；
pt.x=x；
pt.y=y；
变量角度=（90+Math.atan2（pt.y-clock.attr（'cy'）-5，pt.x-clock.attr（'cx'）-5）*180/Math.PI+360）%360；
这个。旋转（角度，200150）；
这个角度=角度；
}
函数start（）{
};
函数结束（）{
警报（parseInt（this.angle））；
}

---

我想知道为什么会发生这种情况，它是否可以修复？

这里是一个更新的原始答案，添加了一点，删除了一点冗余，我在原始答案上添加了一个额外的提琴来反映它

我添加的关键点是

var cpt = clock.node.ownerSVGElement.createSVGPoint();
cpt.x = clock.attr('cx');
cpt.y = clock.attr('cy');
cpt = cpt.matrixTransform(clock.node.getScreenCTM());

时钟的中心现在已经移动了，因此仅使用圆圈的cx相对于鼠标事件来说并没有什么意义。我们需要考虑屏幕上的任何偏移和转换到时钟

我们可以用getScreenCTM（从元素到屏幕的矩阵）得到这个结果，我们可以用原始的cx，cy来计算它在屏幕上的位置

随后，我们使用新的调整坐标cpt.x/y代替cx，cy

var angle = ( 90 + Math.atan2(y - cpt.y - 5, x - cpt.x - 5 ) * 180 / Math.PI + 360)

---

-拖动任意一只手

它似乎在静态页面上起作用，但由于某些原因，它在动态拉入内容的页面上不起作用。这就是我需要它做的。不看它就不知道了。在运行脚本之前，请确保所有内容都已加载，并发布一个示例。我已更正。显然，这取决于加载时页面的位置。例如，当我的屏幕在页面中间时，我会刷新它，这会很奇怪，但是如果我用我的屏幕刷新页面的顶部，它就会起作用。

var angle = ( 90 + Math.atan2(y - cpt.y - 5, x - cpt.x - 5 ) * 180 / Math.PI + 360)