1

免责声明：这是我第一种处理矢量图形的方法；）

我正在编写一个网络应用程序，用户上传一些图像（以撰写绘图），并且他应该上传一个矢量图像（SVG）作为“掩码”。

我正在使用Paper.js库。

所以，我的目标是阅读 SVG 并创建一个 paper.js PathItem来表示它（然后添加填充颜色，无论如何）。

我尝试了一个简单的形状：

在此处输入图像描述

在 SVG 中看起来像：

// Adobe Illustrator
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<polygon fill="none" stroke="#000000" points="48.771,12.137 59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994 
    27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 "/>
</svg>


// Inkscape pure svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100"
   height="100"
   viewBox="0 0 100 100"
   id="Livello_1"
   xml:space="preserve"><metadata
   id="metadata3358"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
   id="defs3356" />
<polygon
   points="59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994 27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 48.771,12.137 "
   id="polygon3352"
   style="fill:none;stroke:#000000" />
</svg>

处理这种形状真的很容易，将points字符串转换为数组，创建路径并.add()为每个元素调用。

当形状不仅仅是线条时，问题就来了，例如：

在此处输入图像描述

我真的不知道如何将弯曲部分翻译成 paper.js 命令！SVG 包含这样的结构：

<path fill="#FFFFFF" stroke="#000000" d="M74.89,73.117H34.605c-11.32,0-20.497-9.177-20.497-20.497v-5.695
    c0-11.32,9.177-20.497,20.497-20.497H74.89"/>
<line fill="none" stroke="#000000" x1="74.89" y1="26.428" x2="74.89" y2="73.117"/>

我没有运气读过W3C svg 转换，我真的不知道如何翻译这M 74.89,73.117 H 34.605 c -11.32,0 -20.497,-9.177 -20.497,-20.497 v -5.695 c 0,-11.32 9.177,-20.497 20.497,-20.497 H 74.89部分。

任何想法？

4

2 回答 2

9

您是否知道 Paper.js 带有自己成熟的 SVG 解析器和导出器，可让您非常轻松地导入和导出 SVG 内容？

目前还没有关于它的教程，但功能页面显示了两个示例：

http://paperjs.org/features/#svg-import-and-export

它记录在此处的参考资料中：

http://paperjs.org/reference/project/#importsvg-svg http://paperjs.org/reference/item/#importsvg-svg

我希望这有帮助！

于 2014-09-28T08:31:55.563 回答
0

转换不是您要照顾的，而是路径。您应该知道，正确解析那里的任何路径数据都需要一些工作，而一个已建立的 SVG 库至今仍无法正确处理（我在这里谈论的是 librsvg）。

幸运的是，SVG DOM 提供了帮助。path 元素具有 property normalizedPathSegList，它简化了d属性中的数据并允许您遍历所有段。查看类似问题的出色答案：Scripting <path> data in SVG (reading and modifying)。

fabric.js是另一个可能对弥合 SVG/canvas 差距感兴趣的库。

于 2012-12-10T12:27:52.130 回答