Raphael.js在拖动时出现奇怪的行为

我有一圈从中心到圆的边缘。用户可以点击并拖动线条，并从设置线条的任何位置获取度数。我正在使用回答here中的代码，并相应地调整了代码。Raphael.js在拖动时出现奇怪的行为

一切工作正常，但拉菲尔影响的元素在页面的更远处，鼠标为了拖动线条而必须在圆外的更远的位置。 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)); 
}

我不知道为什么发生这种情况，如果它甚至可以解决的？

来源

2015-06-19 Diddle Dot

这里是一个更新的原始的一个，添加了一点和删除了另一个冗余位，并且我在原始答案中添加了一个额外的小提琴来反映它。

我添加的关键位...

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要弄清楚它是在屏幕上。

后来的后来，而非CX，CY，我们使用了新的调整坐标cpt.x/Y

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

jsfiddle - 拖动任何手

来源

2015-06-19 17:52:00 Ian

这似乎是一个静态页面上工作，但对于某种原因，它不适用于动态吸引内容的页面。这是我需要它做的。 –

不知道没有看到它。确保在运行脚本之前加载所有内容，并发布示例。 – Ian

我站好了。显然这取决于你加载时的页面位置。例如如果当我的屏幕位于页面中间时刷新，它会显得很奇怪，但是如果我使用页面顶部的屏幕刷新它，它就会起作用。 –

Raphael.js在拖动时出现奇怪的行为

回答

相关问题