如何正确获取 Kinetic JS 的 SVG 路径数据答案

【问题标题】：How to correctly obtain SVG path data for Kinetic JS如何正确获取 Kinetic JS 的 SVG 路径数据
【发布时间】：2014-03-10 23:44:23
【问题描述】：

我正在使用 kinetic-v5.0.1 将图形放置在页面上（最终我想做更多......）但我无法正确呈现它。

我复制了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',

【问题讨论】：

我应该补充一点，当我使用原始路径数据时，演示按预期工作。

标签： canvas svg kineticjs

【解决方案1】：

看起来你的弯曲箭头正在从舞台上按比例缩小。

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

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

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

【讨论】：

感谢提供线索 - 我忘记更改舞台上路径的 x 和 y 位置！现在它在舞台上可见，它看起来是正确的。谢谢。
谢谢马克！非常感谢您帮助解决 SO 问题。
@EricRowell 很高兴能提供帮助...我喜欢你的 KineticJS。顺便说一句，感谢您网站上的教程示例。它们很好地简化了 KineticJS 新用户的学习曲线。