编辑:
我终于找到了一种侵蚀和扩张多边形(偏移)的方法,以便使用 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
有一句话“二元形态学的基本思想是用一个简单的、预定义的形状探测图像,得出关于这个形状如何适合或错过图像中的形状的结论。这个简单的“探测”被称为结构元素,并且本身就是一个二值图像(即空间或网格的子集)。”
我假设这种方法可以用于变形矢量形状,但是如何......
编辑:回复中的一条评论提出了使用过滤器而不是创建新几何图形的可能问题:如果有人想将拖动手柄添加到多边形点,那么拖动手柄可能似乎在错误的位置。这是可以接受的,因为给人的印象是原始路径数据没有受到影响,这实际上是过滤器的情况,但是 - 经过进一步测试 - 证明质量是一个更大的问题。根据这个和这个SVG 过滤器使用矢量图形对象的像素表示而不是路径数据本身,这导致看起来不太好看。
EDIT2:可能的解决方法:此页面中的一个答案使我使用可变宽度笔画和蒙版来实现此问题的美观解决方法。我做了一些测试并实现了类似Adobe Illustrator 的 Offset Path Effect。