Question

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

一切正常，但是在页面的下方受到raphael影响的元素越远，鼠标必须越远离圈子才能拖动线条。 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 - 拖动任何一只手

Raphael.js在拖动方面有奇怪的行为

1 个答案: