我要评论深入了解paper.js：实现svg和json的导入导出功能
paper.js是一款强大的矢量绘图javascript库，非常适合用于复杂的图形处理和交互式网页应用。本文将详细介绍如何在paper.js项目中实现svg和json格式的导入导出功能，这对于开发动态图形编辑器等应用尤为重要。
原创作者 csdn@拿我格子衫来
演示效果
初步设置
首先，确保你的html页面已经包含了paper.js的库文件，并正确设置了画布：
<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>
svg和json处理功能
在这部分，我们将详细解释每个功能的实现。
导入svg
使用importsvg方法，可以将一个svg文件加载到paper.js的项目中。这个方法不仅读取svg文件，还能将其转换成paper.js可识别的路径和形状：
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 — 是否应将导入的形状项展开为路径项 — 默认值：falseoptions.onload: function — 一旦从给定url加载svg内容后调用的回调函数，接收两个参数：转换后的项和原始svg数据的字符串形式。仅在从外部资源加载时需要。options.onerror: function — 如果在加载过程中发生错误时调用的回调函数。仅在从外部资源加载时需要。options.insert: boolean — 是否应将导入的项添加到调用importsvg()的项目中 — 默认值：trueoptions.applymatrix: boolean — 是否应将导入项的变换矩阵应用于其内容 — 默认值：paperscope.settings.applymatrix
导出svg
exportsvg方法允许将当前paper.js项目的状态导出为svg格式，这非常有用于将用户的作品保存为标准格式：
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.matrixoptions.asstring: boolean — 是否返回一个svg节点或字符串 — 默认值：falseoptions.precision: number — 在svg数据中使用的数字的小数位数 — 默认值：5options.matchshapes: boolean — 是否尝试将路径项转换为svg形状项（矩形、圆形、椭圆、线条、折线、多边形），如果它们的几何形状匹配 — 默认值：falseoptions.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
导出json
paper.js提供的exportjson方法可以导出当前项目的json表示，这使得项目状态可以方便地在不同会话之间保存和恢复：
function exportjson() {
const json = paper.project.exportjson({ asstring: false });
localstorage.setitem('json', json.stringify(json));
console.log(json);
}
在这里，我们将导出的json对象保存到了本地存储中，便于后续的导入操作。
点击页面的导出，在控制台可以查到导出的json数据。
数据结构很明朗，最外层是一个数组，数组下的每一个元素代表一个图层。然后下面是group或者path或者compoundpath，
说实话这个结构很奇怪，数组下每一个元素的类型都是使用 上一个元素的值来表示。
导入json
与导出json相对应，importjson方法允许从json格式恢复paper.js的项目状态：
function importjson() {
const json = localstorage.getitem('json');
const item = paper.project.importjson(json);
console.log(item);
}
这段代码从本地存储中读取json数据，并重新创建之前保存的画布状态。
导入的json比如如何一定格式，格式可以参考上文导出的格式。
清空画布
最后，clear方法用于清除画布上的所有内容：
function clearcanvas() {
paper.project.clear();
}
结论
通过以上介绍，我们详细探讨了如何在paper.js中实现svg和json的导入导出功能。这些功能不仅加强了图形应用的灵活性，还大大提高了用户的交互体验。希望本文能帮助你更好地利用paper.js库为你的项目添加高级图形处理功能。
发表评论