javascript - 使用 Javascript 膨胀和腐 eclipse SVG 形状

Question

编辑:

我终于找到了一种侵 eclipse 和扩张多边形(偏移)的方法，以便使用 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 腐 eclipse 和膨胀 SVG 中的形状吗？

我有以下 SVG 示例: http://jsfiddle.net/timo2012/2S4Kt/1/

共有三种形状，蓝色是原始形状，绿色是侵 eclipse (细化)形状，红色是扩张(加粗)形状。它们是用 Illustrator 制作的。

我测试过侵 eclipse 和膨胀滤镜，但效果不太好: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/examples/feMorphology.svg

经过几个小时的互联网搜索，我只找到了有关位图图像腐 eclipse 和膨胀的示例，但没有找到有关矢量形状的示例。

我已经在 Python 中使用 Shapely ( http://toblerity.github.com/shapely/manual.html ) 成功地膨胀和腐 eclipse 了 SVG 多边形，方法是通过 Ajax 调用 PHP 脚本发送路径点，从而对 Python 脚本进行 system() 调用，但这种方法很慢并且需要服务器完成可以在客户端完成的工作。

这是我在 Python 中进行膨胀和腐 eclipse 的代码(如您所见，它非常短):

#!/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)

还可以找到这个文档，它尝试用数学术语定义膨胀和腐 eclipse : http://en.wikipedia.org/wiki/Mathematical_morphology

有句话“二值形态学的基本思想是用一个简单的、预定义的形状探测图像，得出这个形状如何适合或错过图像中的形状的结论。这个简单的“探测”称为结构元素，本身就是一个二值图像(即空间或网格的子集)。”

我认为这种方法可以用于变形矢量形状，但是如何...

编辑:回复中的一条评论提出了使用过滤器而不是创建新几何体的可能问题:如果有人想要向多边形点添加拖动 handle ，那么拖动 handle 可能似乎位于错误的位置。这是可以接受的，因为这样的印象是原始路径数据没有受到影响，这实际上是过滤器中的情况，但是 - 经过进一步的测试 - 事实证明质量是一个更大的问题。根据this和 this SVG 过滤器使用矢量图形对象的像素表示而不是路径数据本身，这导致 not so good looking results .

编辑2:可能的解决方法:本页中的答案之一使我使用可变宽度笔划和蒙版来实现此问题的美观解决方法。我做了一些测试并得到实现an Adobe Illustrator -like Offset Path Effect .

Answer 1

您可以通过使用不同笔画宽度结合 clip-path 或 mask 进行描画来获得您想要的效果。这是 example ，有关其构造方式的一些解释请参阅 here和 here (向上或向下箭头可查看该示例的其他一些幻灯片)。

它不会给你新的几何图形，只是一些看起来像新几何图形的东西。