從SVG

免責聲明創建Paper.js PathItem：這是我的矢量圖形第一種方法;）從SVG

我寫一個web應用whrere用戶上傳一些圖片（撰寫圖），他應該上傳矢量圖（SVG）作爲「掩模」。

即時通訊使用Paper.js庫。因此，我的目標是閱讀SVG並創建一個paper.js PathItem來表示它（然後添加fillcolor，不管）。

我用一個簡單的形狀tryed：

enter image description here

，在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()每個元素。

的問題出現時的造型不只是線條，例如：

enter image description here

我真的不知道如何彎曲部分轉化爲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 transforms沒有運氣，我真的犯規得到怎樣的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部分翻譯。

有什麼想法？

來源

2012-12-10 Strae

您是否知道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-28 08:31:55

大聲笑我寫了一個小腳本來做到這一點，只使用我需要的功能 – Strae

轉換不是你要找的，它是paths。你應該知道，正確地分析任何路徑數據在那裏需要一些工作，並建立SVG庫沒有得到它的權利，這一天（我談論的librsvg這裏）。

幸運的是，SVG DOM來救援。路徑元素具有的屬性normalizedPathSegList，從而簡化從d屬性的數據，並允許您遍歷所有段。見一個很好的回答類似的問題：Scripting <path> data in SVG (reading and modifying)。

fabric.js是另一個圖書館，可能有興趣縮小SVG/canvas差距。

來源

2012-12-10 12:27:52

你是對的，轉型不是我要找的;但路徑（http://www.w3.org/TR/SVG/paths.html）是我所需要的！我啓動了一個小型js類，將svg paths命令轉換爲paperjs命令。 M，H，L，C，V，z很容易，現在我用A（橢圓弧）命令遇到了一些麻煩，看起來像paperJs以完全不同的方式實現它。 – Strae

如果你正在迭代'noramlizedPathSegList'，你可以避免處理弧，因爲它們被轉換成Bézier曲線（這是規範化的一個方面）。 –

回答

相關問題