图形编辑器基于Paper.js教程10：导入导出svg，导入导出json数据

<script src="https://unpkg.com/paper/dist/paper-full.js"></script> <canvas id="myCanvas" resize></canvas> 

接下来，我们通过按钮触发相应的导入导出操作：

<p>   <button onclick="importSvg()">导入SVG</button>   <button onclick="exportSvg()">导出SVG</button>   <button onclick="exportJson()">导出JSON</button>   <button onclick="importJson()">导入JSON</button>   <button onclick="clearCanvas()">清空画布</button> </p> 

function importSvg() {   paper.project.importSVG('./jeep.svg', {     onLoad: function (shapeSvgItem) {       shapeSvgItem.set({         position: paper.view.center,         name: "jeepSvgGroup",       });       console.log(shapeSvgItem, 'shapeSvgItem');     },   }); }; 

这段代码从指定路径加载SVG文件，并在加载完成后将其居中放置在画布上。
导入一个车辆的svg，查看导入的paperjs的对象。
最外层是一个group，然后会有很多子元素，一些svg的元素会被转换为paperjs画布中的元素。
如svg的g标签转换为group，rect标签转换为shape，一些符合元素转换为CompoundPath对象，内部其实是Path对象组成的。

此外 paper.project.importSVG 该api的详细解释及参数解释：
将提供的SVG内容转换为Paper.js项目中的图形项，并将其添加到此项目的活动层中。请注意，首先不会清除项目。如果需要，你可以调用 project.clear() 来实现。

参数选项：

• options.expandShapes : Boolean — 是否应将导入的形状项展开为路径项 — 默认值： false
• options.onLoad : Function — 一旦从给定URL加载SVG内容后调用的回调函数，接收两个参数：转换后的项和原始SVG数据的字符串形式。仅在从外部资源加载时需要。
• options.onError : Function — 如果在加载过程中发生错误时调用的回调函数。仅在从外部资源加载时需要。
• options.insert : Boolean — 是否应将导入的项添加到调用 importSVG() 的项目中 — 默认值： true
• options.applyMatrix : Boolean — 是否应将导入项的变换矩阵应用于其内容 — 默认值： paperScope.settings.applyMatrix

function exportSvg() {   const svgEl = paper.project.exportSVG({});   console.log(svgEl); } 

此代码段将当前画布的内容导出为SVG，并在控制台中打印出来。

导出效果参数打印

导出svg，你可以将一个元素导出成svg，也可以将一整个项目导出成svg。

使用paper.project.exportSVG()时会将整个项目及其所有层和子项作为SVG DOM导出，所有内容都包含在一个顶级SVG组节点中。

选项参数：

• options.bounds : String | Rectangle — 要导出区域的边界，可以是字符串（‘view’、‘content’）或一个矩形对象：‘view’ 使用视图边界，‘content’ 使用所有内容的描边边界 — 默认值：‘view’
• options.matrix : Matrix — 用于变换导出内容的矩阵：如果 options.bounds 设置为’view’，则使用 paper.view.matrix ；对于 options.bounds 的其他设置，使用恒等矩阵 — 默认值： paper.view.matrix
• options.asString : Boolean — 是否返回一个SVG节点或字符串 — 默认值：false
• options.precision : Number — 在SVG数据中使用的数字的小数位数 — 默认值：5
• options.matchShapes : Boolean — 是否尝试将路径项转换为SVG形状项（矩形、圆形、椭圆、线条、折线、多边形），如果它们的几何形状匹配 — 默认值：false
• options.embedImages : Boolean — 栅格图像是否应嵌入为在xlink:href属性中内联的base64数据，或保留为指向其外部URL的链接 — 默认值：true

参数：

• options : Object — 导出选项 — 可选

返回值：

• SVGElement | String — 根据 options.asString 值，项目转换为SVG节点或字符串

处理以项目为维度导出svg http://paperjs.org/reference/project/#exportsvg，

也可以以Item为基本元素导出svg，详细文档解释
http://paperjs.org/reference/item/#exportsvg

function exportJson() {   const json = paper.project.exportJSON({ asString: false });   localStorage.setItem('json', JSON.stringify(json));   console.log(json); } 

在这里，我们将导出的JSON对象保存到了本地存储中，便于后续的导入操作。

点击页面的导出，在控制台可以查到导出的json数据。

数据结构很明朗，最外层是一个数组，数组下的每一个元素代表一个图层。然后下面是group或者Path或者CompoundPath，
说实话这个结构很奇怪，数组下每一个元素的类型都是使用 上一个元素的值来表示。

function importJson() {   const json = localStorage.getItem('json');   const item = paper.project.importJSON(json);   console.log(item); } 

这段代码从本地存储中读取JSON数据，并重新创建之前保存的画布状态。

导入的JSON比如如何一定格式，格式可以参考上文导出的格式。

function clearCanvas() {   paper.project.clear(); }