Raphael.js在拖動時具有怪異的行為

Question

我有一個從中心到圓邊的直線。 用戶可以單擊並拖動線，並從設置線的任何位置獲取角度。 我使用的代碼答案在這里 ，並相應調整了代碼。

一切正常，但是受拉斐爾影響的元素在頁面中越靠下，鼠標就必須越過圓圈才能拖動線。 jsfiddle

var canvas = Raphael('pivot', 0, 0, 320, 320);

var clock = canvas.circle(200, 150, 100).attr("stroke-width", 2);
canvas.circle(200, 150, 3).attr("fill", "#000");

var angleplus = 360,
    rad = Math.PI / 180,
    cx = 200,
    cy = 150,
    r = 90,
    startangle = -90,
    angle = 90,
    x, y, endangle;

for (i = 1; i < 5; i++) {

    endangle = startangle + angle;
    x = cx + r * Math.sin(endangle * rad);
    y = cy - r * Math.cos(endangle * rad);

    canvas.text(x, y, endangle);

    startangle = endangle;
}

var hand = canvas.path("M200 50L200 150").attr("stroke-width", 5);

hand.drag( move, start, end );

function move (dx,dy,x,y) {
    var pt = this.node.ownerSVGElement.createSVGPoint();
    pt.x = x; 
    pt.y = y;

    var angle = ( 90 + Math.atan2(pt.y - clock.attr('cy') - 5, pt.x - clock.attr('cx') - 5 ) * 180 / Math.PI + 360) % 360;
    this.rotate(angle, 200,150);
    this.angle = angle;
}

function start() {
};

function end() {
    alert(parseInt(this.angle));
}

我想知道為什么會發生這種情況，甚至可以解決？

Answer 1

這是一個更新的原始版本，增加了一點，並刪除了另一部分的冗余，我在原始答案中添加了一個額外的小提琴來反映出來。

我添加的關鍵是...

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)

jsfiddle-拖動任何手