Machen Sie einen Kreis ziehbar entlang eines Pfades Svg

Question

Ich arbeite an einem Projekt auf Svg mit dem Plugin SVG.JS. Ich möchte den Kreis dem Pfad folgen lassen, wenn er gezogen wird

Answer 1

Interessante Frage. Ich habe eine Geige für Sie erstellt, die die gewünschte Funktionalität zeigt: https://jsfiddle.net/4ac7o8r6/18/

Ich habe das ziehbare Plugin mit einer Constraint-Funktion verwendet. Normalerweise gibt diese Funktion ein Constraint-Feld oder einen booleschen Wert zurück, der entscheidet, ob etwas gezogen wird oder nicht. Ich kehre immer falsch und bewegen Sie den Kreis selbst:

var canvas = SVG('container') 

var path = canvas.path('M200,300 Q400,50 600,300 T1000,300').stroke('black').x(10).fill('none') 
var length = path.length() 

var circle = canvas.circle(20).draggable(function(x, y) { 

    var p = getPointAtX(x) 

    circle.center(p.x, p.y) 

    return false 

}) 

definiere ich dann eine Funktion, die den Punkt auf einem Pfad für einen gegebenen x zurückgibt. Ich muss dies näherungsweise tun, weil es dafür keine Funktion gibt. Ich mache es mit verschachtelten Intervallen:

var start = path.node.getPointAtLength(0) 
circle.center(start.x, start.y) 

var precision = 1/length 

function getPointAtX(x) { 

    var p, pos = 0.5, interval = pos/2 

    while(p = path.node.getPointAtLength(pos*length)) { 

    if(p.x > x) { 
     pos -= interval 
    } else { 
     pos += interval 
    } 

    interval /= 2 

    // should be one pixel 
    if(interval < precision) break 
    } 

    return p 
} 

Und voila bewegt sich der Kreis auf dem Pfad beim Ziehen. Ganz nett ist es nicht?