与拉斐尔单手拖动时钟 - 不能让鼠标点击位置(One handed draggable clock

我跟着这个教程中建立一个单手的时钟

<!-- language: lang-js -->
    window.onload = function(){

var canvas = Raphael("pane",0,0,500,500);

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 = 85,
    startangle = -90,angle=15,x,y, endangle;

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

         endangle = startangle + angle ;

         x = cx + r  * Math.cos(endangle * rad);
         y = cy + r * Math.sin(endangle * rad);
         canvas.text(x,y,""+(i%24));

          startangle = endangle;
     }

move = function(dx,dy){
    if(dx >=0 && dy <= 85)
        this.rotate(dx*0.25,200,150);
},
start = function(){

},
up = function(){};
var hand = canvas.path("M200 70L200 150").attr("stroke-width",3);



hand.drag(move,start,up);

};

现在我想时钟指针为可拖动（通过智能手机可触摸）来设置一定的时间。我不想时钟运行，我只需要它作为输入设备。我知道如何计算的角度，但不幸的是，我没能获得点击的鼠标位置只有我相对值不知道是什么。没有任何人有一个想法？

编辑：现在，它应该有希望的工作。我也有它运行...更多或更少。这仍然是一个有点神经质，有几点我还是想提高：

防止倒拖圆
通过微调其上的时钟影响
使用/尝试的实际起点，终点，移动功能（我还是没能成功）
...

这将允许你任意拖动手，如果这是诸如此类的事情，你是后。有可能是一个更简单的方法，但是目前不能想起来。

我们需要从屏幕上变换到元素（让他们在相同的坐标空间），getScreenCTM（）将在此给我们，我们将需要找到应用逆。（有可能是一个更简单的方法，如果一切是静态的，没有变换，但往往元素通过各种变换改变，后来赶上我们了）。

我们可以得到，从变换矩阵

this.node.getScreenCTM().inverse()

我们需要从拉斐事件而得到的X，Y，并把它作为一个SVG点，所以我们可以transfom，如..

var pt = this.node.ownerSVGElement.createSVGPoint();
pt.x = x; pt.y = y;
var newpt = pt.matrixTransform( this.node.getScreenCTM().inverse() );

所以一大堆会是什么样子？

hour_hand.drag( move, start, end );
minute_hand.drag( move, start, end );
hand.drag( move, start, end );

function move (dx,dy,x,y) {
    var pt = this.node.ownerSVGElement.createSVGPoint();
    pt.x = x; pt.y = y;
    var newpt = pt.matrixTransform( this.node.getScreenCTM().inverse()     );
    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 / 30  ) )
}

的jsfiddle -拖曳臂移动

编辑：如果你只是想点击移动二手例如，这里是一个轻微的修改，同样的原则，除了我已经把背景白色矩形在里面穿上点击处理程序。

的jsfiddle -点击移动二手

编辑：有一种改进的小提琴这里它考虑到时钟的帐户各种志愿服务岗位相对于其他HTML屏幕等在那里我已经添加了以下...

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

考虑到时钟的屏幕上的任何位置，并且移除的位的其他冗余代码。