Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Canvas 如何正确获取动态JS的SVG路径数据_Canvas_Svg_Kineticjs - Fatal编程技术网

Canvas 如何正确获取动态JS的SVG路径数据

Canvas 如何正确获取动态JS的SVG路径数据,canvas,svg,kineticjs,Canvas,Svg,Kineticjs,我正在使用kinetic-v5.0.1在页面上放置图形(最终我想做更多…),但在正确渲染图形时遇到了问题 我复制了在中给出的示例,但将示例路径数据替换为我自己的。为了获取路径数据,我将一个矢量图形从AI导出到SVG,然后在Sublime中打开并粘贴路径 我需要重新格式化从SVG获得的路径数据,还是需要从其他应用程序(如CorelDraw/Inkscape等)导出SVG。?我试着在逗号后加空格,改变M、C、L、Z等的大小写,但似乎没有任何效果 我的路径数据: data: 'M31.002,371.

我正在使用kinetic-v5.0.1在页面上放置图形(最终我想做更多…),但在正确渲染图形时遇到了问题

我复制了在中给出的示例,但将示例路径数据替换为我自己的。为了获取路径数据,我将一个矢量图形从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',
原始路径数据:

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',

看起来你的弯曲箭头正在从舞台上被缩小

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

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


我应该补充一点,当我使用原始路径数据时,演示效果与预期一致。感谢您提供的线索-我忘了更改舞台上路径的x和y位置!现在可以在舞台上看到了,看起来很正确。谢谢,谢谢马克!非常感谢你帮我解答了这么多问题。@EricRowell很高兴在我可以的时候帮你……我喜欢你的KineticJS。顺便说一句,你的站点上的教程示例值得称赞。它们很好地简化了KineticJS新用户的学习过程。