Paper.js 没有正确绘制 svg 路径

Paper.js not drawing svg paths correctly

这是有问题的草图 -

http://sketch.paperjs.org/#S/q1bKS8xNVbJSCs5OLUnOUNJRSs5PAfHLEosUChJLMgwVbBXyUssVAoBsDXVfMzM9ExMdc2M9Uw8jcyM9M9NcXSMDMz0jIx1jA5qLqGtax+QpAAHYYXrFJUX52anO+Tn5RUBHqiflJCZnq2NREZ6ZUpIBVGFsDfReUlFqYnZBfmZeSbGSVXRsLQA=

它应该是这样的(运行 要查看的片段)-

<svg height="210" width="400" stroke="black">
  <path d="M66.44,73.5H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65" />
  Sorry, your browser does not support inline SVG.
</svg>

不确定哪里出了问题。似乎 paper.js 正在跳过中间点并将第二点与最后一点连接起来。任何想法可能有什么问题,或者在 paper.js 中导入 svg 路径的替代方法?谢谢

参考:http://paperjs.org/reference/path/#path--pathData

第一次阅读 Path 的文档时可能不是很明显,但似乎 Path 只能用于绘制由连接点描述的路径。需要使用的是 CompoundPath 代替。来自文档 -

A compound path is a complex path that is made up of one or more simple sub-paths.

所以这有效 -

var compoundPath = new paper.CompoundPath(pathData);