Raphael SVG déplace l'objet le long d'une ligne horizontale droite

Question

Je souhaite déplacer un bouton vert le long d'un tracé de ligne horizontal, mais le bouton vert ne suit pas ma souris. Comment faire un bouton vert suivez ma souris lorsque vous le faites glisser? Code :

<script> 
var pdefs = { 
     horizontalLine: { 
      path: [ 
        ['M',50,240], 
        ['l',640,0] 
       ], 
      transform: 'r0' 
     } 
    }, 
    useDef = 'wiggles'; 

function run() 
{ 
    var paper = Raphael($('.wrapper')[0], 600, 600), 
     path = paper.path(Raphael.transformPath(pdefs['horizontalLine'].path, pdefs['horizontalLine'].transform)) 
        .attr('stroke-width', 10) 
        .attr('stroke', 'rgb(80,80,80)'), 
     knob = paper.ellipse(0, 0, 25, 15) 
        .attr('fill', 'lime') 
        .attr('stroke', 'rgba(80,80,80,0.5)'), 
     $shim = $('<div>') 
        .css({position: 'absolute', width: 50, height: 50 }) 
        .appendTo($('.wrapper')), 
     len = path.getTotalLength(), 
     bb = path.getBBox(), 
     mid = {x: bb.x+bb.width/2, y: bb.y+bb.height/2}, 
     pal = path.getPointAtLength(0); 
    knob.translate(pal.x,pal.y).rotate(pal.alpha); 
    $shim.css({ left: pal.x-5, top: pal.y-5 }); 
    $shim.draggable({ 
     drag: function (e, ui) { 
      // Find lines and then angle to determine 
      // percentage around an imaginary circle. 
      var t = (Raphael.angle(ui.position.left-25, ui.position.top-25, mid.x, mid.y)) /360; 
      // Using t, find a point along the path 
      pal = path.getPointAtLength((t * len) % len); 
      // Move the knob to the new point 
      knob.transform('t' + [pal.x, pal.y] + 'r' + pal.alpha); 
     }, 
     stop: function (e, ui) { 
      $shim.css({ left: pal.x-25, top: pal.y-25 }); 
     } 
     }); 
} 

run(); 

</script> 

Démo: https://jsfiddle.net/zac1987/zea53w7f/

Answer 1

Votre fonction drag ressemble à un reste de quelque widget différent (un bouton circulaire peut-être?).

Au lieu de:

drag: function (e, ui) { 
    // Find lines and then angle to determine 
    // percentage around an imaginary circle. 
    var t = (Raphael.angle(ui.position.left-25, ui.position.top-25, mid.x, mid.y)) /360; 
    // Using t, find a point along the path 
    pal = path.getPointAtLength((t * len) % len); 
    // Move the knob to the new point 
    knob.transform('t' + [pal.x, pal.y] + 'r' + pal.alpha); 
} 

Essayez:

drag: function (e, ui) { 
    var t = ui.position.left - 50; 
    // Using t, find a point along the path 
    pal = path.getPointAtLength(Math.max(t, 0)); 
    // Move the knob to the new point 
    knob.transform('t' + [pal.x, pal.y] + 'r' + pal.alpha); 
} 

https://jsfiddle.net/1Lzqhm9o/2/