Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vector svg:generate';轮廓路径';_Vector_Svg_Coordinates_Shapes - Fatal编程技术网

Vector svg:generate';轮廓路径';

Vector svg:generate';轮廓路径';,vector,svg,coordinates,shapes,Vector,Svg,Coordinates,Shapes,我有一组坐标,我将其转换为svg路径(使用立方贝塞尔曲线使其平滑)。当我应用某个笔划宽度时,我得到以下结果(蓝点是我的坐标) 我感兴趣的是获取围绕灰色形状运行的路径(例如:在灰色/白色边界上选择任意点,围绕形状旋转,直到回到起点) 我将如何计算这样一条路径 作为参考,这是我的svg信息: <g> <title>number 3</title> <path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 2

我有一组坐标,我将其转换为svg路径(使用立方贝塞尔曲线使其平滑)。当我应用某个笔划宽度时,我得到以下结果(蓝点是我的坐标)

我感兴趣的是获取围绕灰色形状运行的路径(例如:在灰色/白色边界上选择任意点,围绕形状旋转,直到回到起点)

我将如何计算这样一条路径

作为参考,这是我的svg信息:

 <g>
  <title>number 3</title>
  <path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 20.92029,-2.14724c8.68106,0.69732 14.21173,4.90255 18.07971,7.14724c6.23697,3.61945 13.47556,9.5931 15,18c1.07056,5.90372 1.17343,10.97649 -4,16c-6.76816,6.57204 -19.45392,9.57738 -25.69687,10.59046c-3.94836,0.64074 4.73492,3.29883 10.69687,5.40954c8.05417,2.85142 15,8 21,14c6,6 5.26578,10.94739 5.26578,17.03015c-2.4541,7.30975 -4.23343,11.08675 -11.26578,12.96985c-3.98279,1.0665 -11.92578,3.49756 -17,4c-8.95618,0.88684 -15.80411,2.97838 -26,0l-9.19197,-3.44464" id="svg_1" opacity="0.5" stroke-width="10" stroke-linejoin="round" stroke="#000000" fill="none"/>
 </g>

三号

我不确定这是否解决了您的问题。这取决于您要对大纲路径执行的操作

PostScript具有计算笔划路径轮廓的功能,填充该轮廓时,将产生与笔划原始路径相同的视觉输出。但是,生成的路径数据可能没有您预期的那么优雅

以下PostScript程序(我们称之为
path2outlines.ps
将PostScript路径转换为“可填充”SVG路径:

%!
% First, we're converting to outlines.
strokepath

% This is just a string buffer
/S 99 string def

% This defines a procedure for printing coordinates to stdout
/printCoordinates {     % coord* number command
  print                 % coord* number
  array astore          % array
  {                     % coord
    ( )print            % coord
    //S cvs             % string
    print               % 
  }forall
  (\n)print
} bind def

% This iterates over the path segments and prints the SVG path data.
{2(M) printCoordinates}
{2(L) printCoordinates}
{6(C) printCoordinates}
{(Z\n)print}
pathforall

quit
您必须像这样向它提供数据文件(
%
开始注释)。我们将其称为
数据.ps

%!
% First, set up the graphics state parameters
% Equivalent to stroke-width="10"
10 setlinewidth 

% Equivalent to stroke-linejoin="round" (0 = miter, 1 = round, 2 = bevel)
1 setlinejoin

% Now, we're defining the path.
% Use postfix notation, i.e. first coordinates, then command.
% m/M = moveto
% l = rlineto
% L = lineto
% c = rcurveto
% C = curveto

238 50 moveto
5.67569 -1.01351 11.8327 -3.8229 20.92029 -2.14724 rcurveto
8.68106 0.69732 14.21173 4.90255 18.07971 7.14724 rcurveto
6.23697 3.61945 13.47556 9.5931 15 18 rcurveto
1.07056 5.90372 1.17343 10.97649 -4 16 rcurveto
-6.76816 6.57204 -19.45392 9.57738 -25.69687 10.59046 rcurveto
-3.94836 0.64074 4.73492 3.29883 10.69687 5.40954 rcurveto
8.05417 2.85142 15 8 21 14 rcurveto
6 6 5.26578 10.94739 5.26578 17.03015 rcurveto
-2.4541 7.30975 -4.23343 11.08675 -11.26578 12.96985 rcurveto
-3.98279 1.0665 -11.92578 3.49756 -17 4 rcurveto
-8.95618 0.88684 -15.80411 2.97838 -26 0 rcurveto
-9.19197 -3.44464 rlineto
根据您使用的平台,您可以使用Ghostscript调用它,类似于:

gs -q data.ps path2outlines.ps > outlinePath.txt
尝试一下,但我不确定您是否会满意。输出的复杂性可能暗示了问题的实际复杂性。尤其是自相交路径是一个问题

编辑(说到问题):
我相信,一般来说,从数学上讲,创建一条与给定的贝塞尔曲线完全“平行”的贝塞尔曲线是不可能的。

这要求很高。老实说,我怀疑你是否能够编写一个能够做到这一点的sorce代码,而没有一个库可以为你做到这一点。

这种技术有时被称为“缓冲区”,就像在对象周围创建缓冲区一样

如果您可以使用编程语言C,那么您应该看看LEDA库。 在java中,我什么都不知道,可能是GeoTools库。

我创建了一个函数,该函数被认为适用于类似的场景,
产生的轮廓偏移与
笔划宽度
值无关,必须设置为函数的参数

目前,它将一次找到一个偏移边,但对每个边运行一次,就可以解决这个问题

TLDR
实际上,通过svgContour,您可以找到任何svg形状的轮廓,目前它不支持填充模式,但下一个目标是实现这一点。 它依赖getPathData()来获取任何SVGGeometryElement的pathData, 然后这些数据经过三个阶段:

  • 重画最陡曲线
    前提:绘制一条与另一条平行的beizer曲线不是仅通过偏移曲线的点/控制点来获得的,除非曲线足够平坦(在这种情况下,视觉渲染会很好);此方法使用SVGPathData,如果发现一条陡峭的曲线,它会将其拆分,直到它足够平坦为止(返回视觉上等效的SVGPathData)

  • 轮廓路径数据
    在此阶段,pathData在点中分解,点在段中连接,每个段偏移,然后为每个连续段找到交点(我们得到的是偏移点列表)

  • 抽绳
    此阶段将步骤2中的点放置在步骤1中的pathData中,并最终绘制轮廓

例如:

const path=document.querySelector('path'))
svgContour(路径5)
svg{
宽度:100vw;
高度:100vh
}

三号

这是一个很难的问题。你需要通过编程来完成吗?还是可以使用Illustrator或Inkscape?我需要通过编程来完成这项工作,但如果你能告诉我如何在程序中完成这项工作,那也会很有用……谢谢!在Illustrator中,你可以选择路径和菜单对象>展开外观。我对这背后的数学知识只有一个模糊的概念,但它会这不是一个简单的任务。如果不是为了不透明度,你可以克隆你的路径,给它一个更大的笔划宽度并改变颜色,你就可以很容易地进行第二次外笔划。可能有一种方法可以剪裁遮罩,但到目前为止,它们似乎是在遮罩的外面裁剪,而不是在遮罩存在的地方打孔