相关疑难解决方法(0)

tl; dr summary:给我资源或帮助修复下面的代码<path>,用任意矩阵转换SVG 元素的路径命令.

详细信息:
我正在编写一个库,将任意SVG形状转换为<path>元素.当transform="..."层次结构中没有元素时,我可以使用它,但现在我想将对象的局部变换烘焙到路径数据命令本身.

在处理简单的moveto/lineto命令时,这主要是工作(下面的代码).但是,我不确定转换贝塞尔手柄或arcTo参数的适当方法.

例如,我可以将这个圆角矩形转换为<path>:

<rect x="10" y="30" rx="10" ry="20" width="80" height="70" />
--> <path d=?"M20,30 L80,30 A10,20,0,0,1,90,50 L90,80 A10,20,0,0,1,80,100
             L20,100 A10,20,0,0,1,10,80 L10,50 A10,20,0,0,1,20,30" />

在没有任何圆角的情况下进行转换时,我得到了有效的结果:

<rect x="10" y="30" width="80" height="70"
      transform="translate(-200,0) scale(1.5) rotate(50)" />
--> <path d=?"M10,30 L90,30 L90,100 L10,100 L10,30" />

但是,仅转换椭圆弧命令的x/y坐标会产生有趣的结果:
虚线是实际变换后的矩形,绿色填充是我的路径.

以下是我到目前为止的代码(略微减少).我还有一个测试页面,我正在测试各种形状.请帮助我确定如何在elliptical arc给定任意变换矩阵的情况下正确转换各种其他贝塞尔曲线命令.

function flattenToPaths(el,transform,svg){
  if (!svg) svg=el; while(svg && svg.tagName!='svg') svg=svg.parentNode;
  var …

这个问题与这个问题有关.的回答显示出非常好的方式挤出有洞的多边形(见优秀的活生生的例子).答案的主要学习是,three.js(r58)中的路径不能有多个moveTo命令,它必须位于路径的开头,这意味着路径必须被moveTos打破,以便moveTo启动总是一条新路.

挤出三个.js意味着使用可能的斜角将2D路径转换为3D形状.它适用于挤出文本以制作3D字母和单词,但也可用于挤出自定义路径.

现在出现了两个问题:

• 如何处理具有多个孔多边形和多个非孔多边形的多边形？
• 如何将纹理作为整体添加到生成的形状中？

我在http://jsbin.com/oqomuj/1/edit中作为SVG做了一个例子:

使用此路径生成图像:

<path d="
 M57.11,271.77 L57.11,218.33 L41.99,218.63 L105.49,165.77 L138.41,193.18 L138.41,172.2 L152.53,172.2 L152.53,204.93 L168.99,218.63 L153.21,218.63 L153.21,271.77Z
 M74.14,264.13 L105.49,264.13 L105.49,232.8 L74.14,232.8Z
 M115.35,250.7 L135.96,250.7 L135.96,232.61 L115.35,232.61Z
 M56.11,145.77 L56.11,92.33 L40.99,92.63 L104.49,39.77 L137.41,67.18 L137.41,46.2 L151.53,46.2 L151.53,78.93 L152.53,79.76 L155.55,77.23 L159.5,74.52 L168.65,69.81 L176.46,66.93 L188.04,64.16 L200.63,62.7 L213.65,62.7 L226.05,64.09 L234.83,66.06 L245.65,69.73 L252.87,73.27 L259.12,77.34 L262.63,80.33 L265.6,83.47 L268.01,86.76 L269.83,90.17 L271.08,93.68 L271.76,99.08 L271.04,104.64 L269.75,108.2 L267.87,111.63 L265.42,114.91 L262.44,118.01 L258.95,120.92 L255.02,123.63 L245.86,128.34 L238.06,131.22 L226.48,133.99 L213.88,135.44 L200.63,135.44 L188.04,133.99 L176.46,131.22 L168.65,128.34 L159.5,123.63 L155.55,120.92 …