如何正確獲取動態JS的SVG路徑數據

我正在使用kinetic-v5.0.1在頁面上放置一個圖形（最終我想做更多..）但我有一個問題讓它呈現正確。如何正確獲取動態JS的SVG路徑數據

我複製了http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/給出的例子，但用我自己的例子替換了路徑數據。爲了獲取路徑數據，我將AI矢量圖形導出到SVG，然後在Sublime中打開並粘貼路徑。

我需要重新格式化從SVG獲取的路徑數據，還是需要導出來自CorelDraw/Inkscape等不同應用程序的SVG？我試着在逗號後面加空格，並改變M，C，L，Z等的大小寫，但似乎沒有任何效果。

我的路徑數據：

data: 'M31.002,371.742 C10.851,335.694-0.64,294.146-0.64,249.912C-0.64,113.247,109,2.209,245.108-0.062l17.102,25.133l-17.102,25.155 C136.771,52.492,49.643,141.021,49.643,249.912c0,35.032,9.023,67.954,24.864,96.579l-29.783,0.744L31.002,371.742L31.002,371.742z',

原始路徑數據：

data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',

來源

2014-02-12 dom_ahdigital

我要補充一點，當我使用原始路徑數據，演示按預期工作。 –

它看起來像你的弧形箭頭被縮放走下舞臺。

// Try scaling at x:.2,y:.2 instead of x:2,y:2 

scale: {x:.2, y:.2}

演示：http://jsfiddle.net/m1erickson/9q7nD/

enter image description here

來源

2014-02-12 15:39:44 markE

感謝您的線索 - 我忘了更改舞臺上路徑的x和y位置！現在它在舞臺上看起來很正確。謝謝。 –

謝謝！非常感謝您幫助解決SO問題。 –

@EricRowell很高興能幫到我......我喜歡你的KineticJS。順便說一句，您的網站上的教程示例的榮譽。它們很好地簡化了新KineticJS用戶的學習曲線。 – markE

如何正確獲取動態JS的SVG路徑數據

回答

相關問題