2016-05-31 5 views
0

Ich habe ein SVG-Bild mit der Größe 200px x 300px, aber basierend auf einigen Bedingungen, muss ich kleine Kreise zeichnen, die immer einen Radius von 30 haben Bedingung fehlschlägt und möchte, dass diese gleichmäßig (nicht überlappend) über einen bestimmten Bereich meines Bildes geschichtet wird.So berechnen Sie eine Region eines SVG-Bildes für Kreise

Es können mehrere Kreise gezeichnet werden, die aber offensichtlich nicht aus dem Bild verschwinden sollen, sondern stattdessen um die nächste Zeile gewickelt werden, wenn in der ersten Zeile des Bildes bereits 5 Kreise gezeichnet wurden.

Das gleiche gilt dann für Zeile 2, sobald 5 Kreise mit dem Radius 30 gezeichnet sind, wrap zur nächsten Zeile.

Ich benutze snapsvg.io, aber ich bin mir nicht sicher, wie Sie den Bereich des Bildes berechnen, wo ich meine Kreise gezeichnet und unsicher, wie Sie den Umbruch auf die nächste Zeile ausführen.

Jede Hilfe, wie man das oben genannte erreicht, würde sehr geschätzt werden.

Danke.

+1

der Modulo-Operator in Javascript wird nützlich sein, um zu wickeln. –

+0

Haben Sie diesen Operator nicht benutzt - werden Sie schauen, aber immer noch nicht sicher, wie Sie die Grenzen einer bestimmten Region meines Bildes ausarbeiten, um meine Kreise hinzuzufügen? – tonyf

+0

Sie möchten, dass Ihre Kreise von x = 0 + r bis x = 200 gezeichnet sind - oder nicht? –

Antwort

0

Verwaltet, um herauszufinden, wie dies erreicht werden kann, indem die Grenze der Region, die ich anvisieren wollte, berechnet wurde und auch der Modulo-Operator von javascript verwendet wurde, wie von Robert Longson vorgeschlagen.

Durch Grenze, ich manuell jede Ecke Position meiner Bildregion, die ich verwenden wollte, d. H. Von links nach rechts nach unten und nach links wieder - im Grunde Breite/Höhe.

Außerdem wusste ich, dass ich nur 7 kleine Kreise von links nach rechts über diese Bildregion anzeigen würde. Wenn also der Schleifenindex% 7 = 0 ist, setze ich meine (x, y) -Koordinaten auf die nächste neu ine - 2r.

+0

@RobertLongson - auf Ihre Anregungen habe ich meine Antwort aktualisiert. – tonyf