BEARBEITEN:

Endlich habe ich eine Möglichkeit gefunden, Polygone zu erodieren und zu erweitern (Versatz), sodass mithilfe der Clipper-Bibliothek eine neue Geometrie erstellt wird:https://sourceforge.net/projects/jsclipper/

Live-Demo von Javascript Clipper:http://jsclipper.sourceforge.net/5.0.2.1/main_demo.html

Der Clipper kann nur Polygone oder Mehrfachpolygone (z. B. Polygone mit Löchern) verarbeiten. Damit er mit anderen grafischen Objekten im SVG-Format arbeiten kann, müssen diese in gerade Linien konvertiert werden. Zumindest Pfade lassen sich mit ziemlich einfach in Linien konvertierenpath.getTotalLength() undpath.getPointAtLength() (http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/).

Die andere Möglichkeit ist die Verwendung dieser ähnlichen Technik (die keine neue Geometrie erzeugt):https://stackoverflow.com/a/12723835/1691517

Gibt es eine Möglichkeit, Formen in SVG über Javascript zu erodieren und zu erweitern?

Ich habe das folgende SVG-Beispiel:http://jsfiddle.net/timo2012/2S4Kt/1/

Es gibt drei Formen, blau ist original, grün ist erodiert (verdünnt) und rot ist dilatiert (fett). Sie sind in Illustrator erstellt.

Ich habe Erodier- und Dilatationsfilter getestet, aber der Effekt ist nicht so gut:https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg

Nach einigen Stunden Suche über das Internet habe ich nur Beispiele zum Erodieren und Erweitern von Bitmap-Bildern gefunden, aber nichts über Vektorformen.

Es ist mir gelungen, SVG-Polygone mit Shapely zu erweitern und zu erodieren (http://toblerity.github.com/shapely/manual.html ) in Python durch Senden von Pfadpunkten über einen Ajax-Aufruf an ein PHP-Skript, wodurch ein system () -Aufruf an ein Python-Skript erfolgt. Diese Methode ist jedoch langsam und erfordert, dass der Server die Arbeit erledigt, die clientseitig erledigt werden könnte.

Dies ist mein Code zum Erweitern und Erodieren in Python (wie Sie sehen, ist er ziemlich kurz):

#!/usr/bin/python26

from shapely.geometry import Polygon
from shapely.geometry import MultiPolygon

import sys

if len(sys.argv)>2:
  inset=eval(sys.argv[1])
  coords=eval(sys.argv[2])
else:
  sys.exit()

bowtie = Polygon(coords)
clean = bowtie.buffer(inset)
clean = clean.simplify(1, preserve_topology=False)
if clean.length>0:
  if clean.geom_type=="MultiPolygon":
    for n in range(0, len(clean)):
      print list(clean[n].exterior.coords)
      #print "\n"
  elif clean.geom_type=="Polygon":
    print list(clean.exterior.coords)

Finden Sie auch dieses Dokument, in dem versucht wird, Dilatation und Erosion in mathematischen Begriffen zu definieren:http://en.wikipedia.org/wiki/Mathematical_morphology

Es gibt einen Satz: "Die Grundidee in der binären Morphologie besteht darin, ein Bild mit einer einfachen, vordefinierten Form zu untersuchen und Schlussfolgerungen darüber zu ziehen, wie diese Form zu den Formen im Bild passt oder diese verfehlt. Diese einfache" Sonde "wird als strukturierendes Element bezeichnet. und ist selbst ein binäres Bild (dh eine Teilmenge des Raums oder Gitters). "

Ich gehe davon aus, dass diese Methode zum Verwandeln von Vektorformen verwendet werden könnte, aber wie ...

BEARBEITEN: Bei einem Kommentar in einer Antwort wurde möglicherweise die Frage aufgeworfen, ob Filter verwendet werden müssen, anstatt eine neue Geometrie zu erstellen. Wenn jemand Ziehpunkte zu Polygonpunkten hinzufügen möchte, scheinen sich die Ziehpunkte an der falschen Stelle zu befinden. Dies kann akzeptabel sein, da dann der Eindruck entsteht, dass die ursprünglichen Pfaddaten unberührt sind, was bei Filtern tatsächlich der Fall ist, aber nach weiteren Tests bewiesen wurde, dass die Qualität ein größeres Problem darstellt. Gemäßdiese unddiese Der SVG-Filter verwendet die Pixeldarstellung des Vektorgrafikobjekts anstelle der Pfaddaten selbst, was zu führtnicht so gut aussehende Ergebnisse.

EDIT2: MÖGLICHE ABHILFE: Eine der Antworten auf dieser Seite hat mich veranlasst, Striche und Masken mit variabler Breite zu verwenden, um eine ansprechende Lösung für dieses Problem zu finden. Ich habe ein paar Tests gemacht und mich implementieren lassenein Adobe Illustrator-ähnlicher Offset-Pfad-Effekt.