One Handed Draggable Clock With Raphael - Cannot Get Mouse Click Position

i followed this tutorial to build a one handed clock window.onload = function(){ var canvas = Raphael('pane',0,0,500,500); canvas.circle(200,

Solution 1:

This will allow you to drag any of the hands, if this is the sort of thing you are after. There may be an easier way, but can't think of it for the moment.

We need to get the transform from the screen to the element (so that they are in the same coordinate space), getScreenCTM() will give us this, and we'll need to find the inverse to apply. (there may be a simpler way if everything is static and no transforms, but often elements are changed by various transforms and catches us out later).

We can get that transform matrix from

this.node.getScreenCTM().inverse()

We'll need to get the x,y from the Raph event and put it as an svg point so we can transfom, eg..

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

So the whole lot would look like...

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

functionmove (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;
}

functionstart() {}

functionend() {
     alert( parseInt( this.angle / 30  ) )
}

jsfiddle - drag arms to move

Edit: If you just want a click to move the 2nd hand for example, here is a slight modification, same principle, apart from I've put a background white rect in there to put the click handler on.

jsfiddle - click to move 2nd hand

Edit: There's an improved fiddle here which takes into account various postions of the clock with respect to other html on the screen etc. Where I've added the following...

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

to take into account any position on the screen of the clock, and removed a bit of other redundant code.