Snap.svg: Wie benutzt man Set.bind (...)?

Ich kann nicht herausfinden, wie Sie die Funktion Set.bind (...) für Snap.svg verwenden.Snap.svg: Wie benutzt man Set.bind (...)?

Unten ist ein Beispiel mit drei (3) Elementen in einem Satz: 2 Kreise und eine Ellipse. Ich möchte auf einige Attr in den verschiedenen Elementen zugreifen und ändern, indem Sie binden.

Ein paar Beispiele für Bindung würde geschätzt werden.

(In diesem Moment kann ich keinen Vorteil sehen, wenn ich das Set-Objekt anstelle eines Arrays verwende. Gibt es irgendwelche Features des Sets, die nicht genauso gut mit einem Array behandelt werden können?)

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script> 
 
</head> 
 
<body> 
 
<svg id=mySVG width=400 height=200></svg> 
 
<script> 
 
    var SNPsvg = Snap("#mySVG"); 
 
    var circle1 = SNPsvg.circle(150,100,50).attr({fill: 'red' }); 
 
    var circle2 = SNPsvg.circle(250,100,50).attr({fill: 'blue' }); 
 
    var ellipse = SNPsvg.ellipse(200,100,50,20).attr({fill: 'green' }); 
 

 
    var mySet= Snap.set(circle1,circle2,ellipse) 
 

 
    setTimeout(function() 
 
    { 
 
     //mySet.bind(...) 
 

 
    },1000) 
 
</script> 
 
</body> 
 
</html>

Quelle

2017-04-09 Francis Hemsher

Der Hauptgrund, um einen Satz zu verwenden, ist, dass Sie auf jedem Element mit einem einzigen Befehl wirken kann. Zum Beispiel ...

mySet.animate({ transform: 's2' },1000)

jsfiddle

die dann auf jedem einzelnen Element mit dieser Animation wirken.

Warum würden Sie Set.bind verwenden? Ich muss zugeben, ich habe es noch nie benutzt, noch den Zweck gesehen, aber ich nehme an, dass es einen gibt :).

So zur eigentlichen Frage, wie wird es verwendet. Ich denke, Sie tun ..

mySet.bind('x', circle1, 'cx') 
mySet.attr({ 'x': '200' })

jsfiddle

Wenn Sie Attribut x gesetzt ist, wird es eingestellt cx auf circle1 in diesem Fall zuzuschreiben.

Oder

mySet.bind('x', function(val) { console.log(val, ' is passed')}) 
mySet.attr({ 'x': '200' })

jsfiddle

Wie, warum aber ich bin nicht sicher :), ich den Vorteil der Verwendung eines Satzes Objekt sehen kann, aber nicht besonders mit set.bind() , vor allem, weil es "das" nicht an die Funktion zu übergeben scheint. Ich frage mich, ob es so etwas ist, wenn man x auf eine Menge von Kreisen und Rezepten setzt, man könnte cx ODER x irgendwie anpassen, aber ich sehe nicht, wie das auf einfache Weise gemacht wird, wenn das Objekt bearbeitet wird ist irgendwie nicht passiert.

Ich würde normalerweise eher geneigt sein, etwas zu tun, wie ...

mySet.forEach(function(el) { el.attr({ fill: 'blue' }) });

Quelle

2017-04-09 18:09:35 Ian

Vielen Dank, Ian. Ich stimme zu, dass der einzige Befehl des Sets und forEach die nützlichsten Funktionen sind. –

Snap.svg: Wie benutzt man Set.bind (...)?

Antwort

Verwandte Themen