Ich bin nicht in der Lage herauszufinden, wie eine SVG-Animation, die ich dynamisch auf meinem Papier während eines Zoom-in oder Zoom Out hinzufügen.Wie man eine dynamisch hinzugefügte SVG-Animation auf jointjs übersetzt, wenn ein Papier skaliert wird
Ich füge die Animation hinzu, wenn die Verknüpfung entsprechend der Geschäftslogik auf folgende Weise aktiv ist.
Jetzt gehe ich auf die Leinwand und zoom oder verkleinern Sie die Elemente in der Leinwand Maßstab entsprechend. Ich benutze den Befehl paper.scale. Aber die Animation, die ich hinzugefügt habe, bewegt sich nicht. Ich konnte es verkleinern, aber nicht seine Position. Wie erreiche ich das ?.
Mein Code zum Vergrößern und Verkleinern ist wie folgt. Ich weiß auch, dass ich auf dem SVG-Objekt das übersetzen verwenden muß Befehl, aber ich weiß nicht, wie die übersetzen Werte auf dem
zoomlevel berechnen$('#zoom-in').on('click', function(e) {
e.preventDefault();
zoomLevel = Number((Math.min(1, zoomLevel + 0.2)).toFixed(1));
canvasPaper.scale(zoomLevel, zoomLevel,0,0);
_.each(canvasGraph.getLinks(), function(link) {
if(link.attr('linkActiveAnimationSvgId/text')) {document.getElementById(link.attr('linkActiveAnimationSvgId/text')).setAttribute("transform", "scale(" + zoomLevel + "," + zoomLevel + ")")
}
})
})
Mein Auszoomen Code ist wie unten
$('#zoom-out').on('click', function(e) {
e.preventDefault();
zoomLevel =Number((Math.max(0.2, zoomLevel - 0.2)).toFixed(1));
canvasPaper.scale(zoomLevel, zoomLevel,0,0);
_.each(canvasGraph.getLinks(), function(link) {
if(link.attr('linkActiveAnimationSvgId/text')) {document.getElementById(link.attr('linkActiveAnimationSvgId/text')).setAttribute("transform", "scale(" + zoomLevel + "," + zoomLevel + ")")
}
})
})