【发布时间】：2012-09-22 23:00:38
【问题描述】：
编辑：
我终于找到了一种侵蚀和扩张多边形（偏移）的方法，以便使用 Clipper 库创建新的几何图形： https://sourceforge.net/projects/jsclipper/
Javascript Clipper 现场演示： http://jsclipper.sourceforge.net/5.0.2.1/main_demo.html
Clipper 只能处理多边形或多多边形（例如带孔的多边形），因此要与其他 SVG 格式的图形对象一起使用，必须将它们转换为直线。至少使用path.getTotalLength() 和path.getPointAtLength() (http://whaticode.com/2012/02/01/converting-svg-paths-to-polygons/) 将路径转换为行相当容易。
另一种可能性是使用类似技术（不会创建新几何）： https://stackoverflow.com/a/12723835/1691517
有什么方法可以通过 Javascript 腐蚀和扩张 SVG 中的形状？
我有以下 SVG 示例： http://jsfiddle.net/timo2012/2S4Kt/1/
共有三种形状，蓝色是原始的，绿色是侵蚀的（变细的），红色是扩张的（加粗的）。它们是在 Illustrator 中制作的。
我测试过侵蚀和扩张过滤器，但效果不太好： https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg
在互联网上搜索了几个小时后，我只找到了有关位图图像侵蚀和膨胀的示例，但没有找到有关矢量形状的示例。
我已经成功地在 Python 中使用 Shapely (http://toblerity.github.com/shapely/manual.html) 扩展和侵蚀 SVG 多边形，方法是通过 Ajax 调用向 PHP 脚本发送路径点，从而使 system() 调用 Python 脚本，但是这种方法很慢并且需要服务器做客户端可以做的工作。
这是我在 Python 中用于膨胀和腐蚀的代码（如您所见，它很短）：
#!/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)
还可以找到这个文档，它试图用数学术语定义扩张和腐蚀： http://en.wikipedia.org/wiki/Mathematical_morphology
有一句话“二值形态学的基本思想是用一个简单的、预定义的形状探测图像，得出这个形状如何适合或错过图像中的形状的结论。这个简单的“探测”被称为结构元素，它本身就是一个二值图像（即空间或网格的子集）。”
我假设这种方法可以用于变形矢量形状，但是如何...
编辑：回复中的一条评论提出了使用过滤器而不是创建新几何体的可能问题：如果有人想将拖动手柄添加到多边形点，那么拖动手柄可能似乎在错误的位置。这是可以接受的，因为给人的印象是原始路径数据没有受到影响，这实际上是过滤器中的情况，但是 - 经过进一步测试 - 证明质量是一个更大的问题。根据this和this，SVG过滤器使用矢量图形对象的像素表示而不是路径数据本身，这导致not so good looking results。
EDIT2：可能的解决方法：此页面中的一个答案使我使用可变宽度笔划和蒙版来实现此问题的美观解决方法。我做了一些测试并实现了an Adobe Illustrator -like Offset Path Effect。
【问题讨论】：
标签： javascript svg geometry