Raphael SVG düz yatay çizgi boyunca hareket ettirme nesnesi

Question

Yatay çizgi yolu boyunca yeşil bir düğme taşımak istiyorum ancak yeşil düğme faremi takip etmiyor. Yeşil düğme nasıl sürüklenirken fareyi takip edebilirim? kodu:

<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> 

Demo: https://jsfiddle.net/zac1987/zea53w7f/

Answer 1

Sizin drag fonksiyon bazı farklı widget'ından leftover gibi görünüyor (belki bir dairesel düğme?).

yerine:

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); 
} 

Dene: dikey fareyi hareket ettirdiğinizde

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/