当前位置: 首页 > news >正文

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

深入了解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 — 是否应将导入的形状项展开为路径项 — 默认值:false
  • options.onLoad: Function — 一旦从给定URL加载SVG内容后调用的回调函数,接收两个参数:转换后的项和原始SVG数据的字符串形式。仅在从外部资源加载时需要。
  • options.onError: Function — 如果在加载过程中发生错误时调用的回调函数。仅在从外部资源加载时需要。
  • options.insert: Boolean — 是否应将导入的项添加到调用importSVG()的项目中 — 默认值:true
  • options.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.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

导出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库为你的项目添加高级图形处理功能。

相关文章:

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

深入了解Paper.js&#xff1a;实现SVG和JSON的导入导出功能 Paper.js是一款强大的矢量绘图JavaScript库&#xff0c;非常适合用于复杂的图形处理和交互式网页应用。本文将详细介绍如何在Paper.js项目中实现SVG和JSON格式的导入导出功能&#xff0c;这对于开发动态图形编辑器等…...

[STM32][Bootloader][教程]STM32 HAL库 Bootloader开发和测试教程

0. 项目移植 对于不想知道其执行过程的朋友来说&#xff0c;可以直接移植&#xff0c;我的板子是STM32F411CER6, 512K M4内核 项目地址&#xff1a; Bootloader&#xff08;可以自己写标志位用于自测&#xff0c;项目中这部分代码已经被注释&#xff0c;可以打开自行测试&…...

如何手写一个SpringBoot框架

你好&#xff0c;我是柳岸花开。 在这篇文章中&#xff0c;我们将手写模拟SpringBoot的核心流程&#xff0c;让大家能够以一种简单的方式了解SpringBoot的大概工作原理。 项目结构 我们创建一个工程&#xff0c;包含两个模块&#xff1a; springboot模块&#xff0c;表示Spring…...

vite解决前端跨域步骤

Vite 解决跨域问题的原理主要是通过其内置的开发服务器功能实现的&#xff0c;具体来说&#xff0c;是通过 HTTP 代理&#xff08;HTTP Proxy&#xff09;机制。在开发环境中&#xff0c;Vite 服务器可以配置为一个代理服务器&#xff0c;将前端应用发出的请求转发到实际的后端…...

同步交互与异步交互:深入解析与选择

同步交互与异步交互&#xff1a;深入解析与选择 1、同步交互2、异步交互3、选择策略 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在软件开发的世界里&#xff0c;交互方式主要分为两大类&#xff1a;同步与异步。下面是对这两种方式的解…...

Day1

首先&#xff0c;大概学习了一下用anaconda去创建一个环境&#xff08;因为Django是有python版本的要求&#xff09;&#xff0c;然后学着去切换环境。 创建环境&#xff1a;conda create -n django_study python3.10 激活环境&#xff1a;conda activate django_study 删除环…...

Introduction to Data Analysis with PySpark

1.DataFrame and RDDs 2.Spark Architecture 3. Data Formats and Data Sources 倘若您觉得我写的好&#xff0c;那么请您动动你的小手粉一下我&#xff0c;你的小小鼓励会带来更大的动力。Thanks....

基于双PI控制器结构的六步逆变器供电无刷直流电机调速simulink仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 无刷直流电机&#xff08;BLDCM&#xff09;原理 4.2 六步换相逆变器 4.3 双PI控制器设计 5.完整工程文件 1.课题概述 基于双PI控制器结构的六步逆变器供电无刷直流电机调速simulink仿真。双PI控制…...

双向链表的基本操作

#include<iostream> #include<cmath> #include<cstring> using namespace std; typedef long long ll; typedef struct line {int data;struct line *pre;//前指针struct line *next;//后指针 }line,*a; line* init_line(line*head) {cout<<"请输…...

modbus tcp和modbusRTU的区别是什么?

Modbus是一种应用广泛的通信协议&#xff0c;主要用于工业自动化和过程控制系统。Modbus有多种变体&#xff0c;其中Modbus TCP和Modbus RTU是最常见的两种。以下是它们之间的主要区别&#xff1a; 1. 基本定义 Modbus RTU (Remote Terminal Unit): 是基于串行通信的协议&am…...

web小游戏开发:拼图(四)对调和移动拼图玩法的实现

web小游戏开发:拼图(四)对调和移动拼图玩法的实现 对调方式对调模式实现移动方式移动的实现小结对调方式 在完成了原始拼图玩法后,剩下两个玩法其实相对就变得简单的多了。 对调模式,简单来说,就是选中两个图块,然后位置对调一下。 那么,我们来整理一下,看看需要哪…...

前端:Vue学习 - 智慧商城项目

前端&#xff1a;Vue学习 - 智慧商城项目 1. vue组件库 > vant-ui2. postcss插件 > vw 适配3. 路由配置4. 登录页面静态布局4.1 封装axios实例访问验证码接口4.2 vant 组件 > 轻提示4.3 短信验证倒计时4.4 登录功能4.5 响应拦截器 > 统一处理错误4.6 登录权证信息存…...

KVM调整虚拟机与CPU铆钉(绑定)关系

虚拟机铆钉CPU 把虚拟机的vCPU绑定在物理CPU上&#xff0c;即VCPU只在绑定的物理CPU上调度&#xff0c;在特定场景下达到提升虚拟机性能的目的。比如在NUMAQ系统中&#xff0c;把vCPU绑定在同一个NUMA节点上&#xff0c;可以避免CPU跨节点访问内存&#xff0c;避免影响虚拟机运…...

华火电焰灶:烹饪新宠,温暖与美味的完美融合

在众多厨房电器中&#xff0c;华火电焰灶以其独特的魅力和卓越的性能脱颖而出&#xff0c;成为了众多家庭的烹饪新宠。今天&#xff0c;就让我们一同走进华火电焰灶的精彩世界&#xff0c;探索它的非凡之处。 华火电焰灶&#xff0c;首先吸引人的便是其创新的等离子电生明火技术…...

理想发周榜,不是新能源市场的原罪

余华在他的小说《在细雨中呼喊》曾写过这么一段话&#xff1a; “仓廪实而知礼节&#xff0c;衣食足而知荣辱”&#xff0c;在物质需求得到满足以前&#xff0c;精神文明的发展难免会有所滞后。所以&#xff0c;贫穷&#xff0c;不是原罪。 同样的&#xff0c;在如今的新能源…...

AHK是让任何软件都支持 Shift + 鼠标滚轮 实现界面水平滚动

目录 基本介绍 详细特点 图解安装 下载失败&#xff1f;缓慢&#xff1f; 创建并运行脚本代码&#x1f603; 新建空 xxx.ahk文件 vscode/记事本等编辑工具打开 复制并粘贴简易脚本 运行 其他问题 问题一&#xff1a;弹出无法执行此脚本 关闭脚本 基本介绍 AutoHot…...

如何在C语言中实现求解超级丑数

超级丑数是一个正整数&#xff0c;并且它的质因数只包含在给定的质数列表中。超级丑数的定义类似于丑数&#xff0c;但可以根据特定需求改变质因数的范围。下面是如何在C语言中实现求解超级丑数的代码。 我们使用最小堆&#xff08;优先队列&#xff09;来高效地生成超级丑数序…...

secExample靶场之java反序列化漏洞复现

我是使用kali虚拟机搭建的靶场&#xff0c;具体搭建步骤可以看我之前的博客内容。 访问靶机地址&#xff0c;打开java反序列化的 点进去后是如图的页面&#xff0c;随便输入一信息。 可以看到敏感信息直接显示在了页面上。 访问192.168.189.141:8080/cors1&#xff0c;可以看到…...

解决升级Linux内核后,open files设置无效的问题。

问题过程 操作系统是OpenEuler 20.03&#xff0c;内核由4.19.90-2112.8.0.0131.oe1.aarch64升级到kernel-4.19.90-2401.1.0.0233.oe1.aarch64后&#xff0c;重启系统后&#xff0c;重新开起来运行OceanBase就运行不起来了&#xff0c;提示open files must not be less than 20…...

关于防范勒索病毒Play新变种的风险提示

近日&#xff0c;工业信息化部网络安全威胁和漏洞信息共享平台监测发现针对 Linux的勒索病毒Play新变种&#xff0c;攻击对象主要为VMware ESXi 虚拟化环境&#xff0c;攻击目标包括制造、建筑业、IT、金融和房地产等行业。 Play勒索病毒又名 Balloonfly和PlayCrypt&#xff0…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

大模型智能体核心技术:CoT与ReAct深度解析

**导读&#xff1a;**在当今AI技术快速发展的背景下&#xff0c;大模型的推理能力和可解释性成为业界关注的焦点。本文深入解析了两项核心技术&#xff1a;CoT&#xff08;思维链&#xff09;和ReAct&#xff08;推理与行动&#xff09;&#xff0c;这两种方法正在重新定义大模…...