图形编辑器基于Paper.js教程02:图形图像编辑器概述

背景

由于笔者目前从事开发图形编辑器,在开始的那段时间里,调研和研究了非常多的图形编辑器,图像编辑器之类的软件,开源,闭源的,免费的,商业的都有。今天的这篇文章就来简单概述一下我调研的结果和过程。

图形或图像编辑器

其实图像和图形是有很大区别的, 图形更倾向于矢量图形,如svg的编辑。图像更倾向于位图,png,jpg图片的编辑。
图形编辑器常用于logo设计,矢量图形开发,svg开发
图像编辑器常用于图像处理,如证件照,在线海报制作

两者有联系,也有侧重点。
下面列一下开源的图像编辑器和图形编辑器

开源的图形编辑器

https://github.com/SVG-Edit/svgedit
https://github.com/excalidraw/excalidraw
https://github.com/jgraph/drawio
https://github.com/Snapmaker/Luban
https://github.com/LaserWeb/deprecated-LaserWeb3
https://github.com/Yqnn/svg-path-editor
https://github.com/flux3dp/beam-studio

个人研究激光切割机上位机软件 比较多,所以,所以。

开源的图像编辑器

https://github.com/nihaojob/vue-fabric-editor
https://github.com/ly525/luban-h5
https://github.com/dromara/yft-design
其实还有很多

有些项目不太好定义是否是图像编辑器,主要看他们的最终输出物是什么。
是图片的就是 图像编辑器,是 svg或者gcode就是 图形编辑器(纯个人观点,不同意就举手)。

不开源的有 即时设计,稿定,可画canva,figma,摹客。
在线设计logo的平台 https://typogram.co/ (基于paperjs)。

不开源的 激光切割机 上位机编辑器也有不少如: xtool,wecreate ,laserpecker,circut design 。

根据我的研究 xtool 使用的Vue + PixiJS
wecreate,laserpecker 是Vue + Fabric.js
circut design 这玩意代码保护的很好,只知道是angular。

然后这里再给大家看一下商业用的设计软件,使用的技术栈

稿定的设计页面
在这里插入图片描述

即时设计
在这里插入图片描述

可画(虽然能搜到paper,但并不一定是使用paperjs)
在这里插入图片描述

上面两个产品 都无法全局搜到到 fabric关键词。

蓝湖
在这里插入图片描述

技术选项

通过上面的几个产品对比和技术栈分析,大家在技术选项时也会有个大致的印象。
上面的技术分析我没调研太多官方公布的资料,所以有出处也别找我。我只会F12 全局搜索关键词。

做这种图像,图形编辑器,基本就是这几个库了。

  • Fabric.js
  • Paper.js
  • PixiJS

其实还有一些其他有效的基础canvas库,如 konva ,zrender

我没时间去调研了,有用过的同学可以在文章底部评论,我加到文章中。

Fabric.js 成熟度最高,社区插件,效果,开源项目最多,持续维护,自带支持选择,缩放,框选案例,微操有限,比如实现一个填充线算法。
Paper.js 目前基本不维护啦,但是对于矢量图的微操支持的很全,各种插件都需要自己写,比如缩放,旋转插件,框选。
PixiJS 这个没用过,了解不多,看介绍是主打h5 canvas 游戏方面。那么相对的一些平面选择回相对强一些,目前我就看到xtool Create Space 使用,肯定也有很多优秀的项目在用。但还没被我发现。

网上利用canva做高性能文档,表格,图片编辑的项目非常多,非常多。

https://hufe.club/canvas-editor/
https://excalidraw.com/
https://github.com/tldraw/tldraw
https://github.com/dream-num/Luckysheet
https://github.com/rough-stuff/rough

总结

总结懒得写了,就写一句话吧

每个项目都很优秀,普通人掌握其中一个就能做出非常好的项目或作品。我们需要沉下心仔细研究。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29947.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloudNetflix组件整合

SpringCloudNetflix组件整合 Eureka注册中心 Eureka是什么 Eureka是netflix的一个子模块,也是核心模块之一,Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移。服务注册与发现对于微服务架构来说是…

AI学习指南机器学习篇-模型应用与Python实践

AI学习指南机器学习篇-模型应用与Python实践 在机器学习领域,模型应用是非常重要的一环,它涉及到数据的准备、模型的训练、模型的评估和预测等多个方面。本篇博客将从实际应用的角度,利用Python语言为大家介绍模型应用的全过程,并…

Python实现音乐播放器 -----------内附源码

Python做一个简易的音乐播放器 简易音乐播放器 import time import pygamefile r歌曲路径 pygame.mixer.init() print(正在播放,file) track pygame.mixer.music.load(file) pygame.mixer.music.play() time.sleep(130) pygame.mixer.music.stop()运行效果: 开始…

EE trade:现货黄金的计量单位及转换

在现货黄金市场中,计量单位的不同会影响投资者对价格的理解和对交易的操作。因此,了解现货黄金的计量单位是每一位投资者的必修课。对于那些刚刚踏入黄金投资的新手们来说,掌握这些知识尤为重要。本文将为您详细介绍现货黄金的主要计量单位及…

绍兴市第七届青少年编程复赛题目(2008)

01&#xff1a;明明的随机数 题目描述 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了试验的客观性&#xff0c;他先用计算机生成N个1到1000之间的随机整数&#xff08;N<100&#xff09;,对其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的去…

Harbor本地仓库搭建004_Harbor配置管理功能_分布式分发功能_仓库管理_用户管理_垃圾清理_审查服务_项目定额---分布式云原生部署架构搭建00

然后我们再看一下配置管理,这里主要有个认证模式 这里我们是数据库,其实就是我们安装的postgresql 可以看到还有LDAP对吧,这个其实就是自己公司如果有 LDAP服务器,那么可以对接过来,那么,这个时候 再登录harbor的时候,就可以直接使用公司的,LDAP来管理,所有的用户了,其实就是…

AI项目二十三:危险区域识别系统

若该文为原创文章&#xff0c;转载请注明原文出处。 一、介绍 在IPC监控视频中&#xff0c;很多IPC现在支持区域检测&#xff0c;当在区域内检测到有人闯入时&#xff0c;发送报警并联动报警系统&#xff0c;以保障生命和财产安全具有重大意义。它能够在第一时间检测到人员进入…

ipython的使用技巧整理

IPython&#xff08;Interactive Python&#xff09;是一个功能强大的交互式计算环境&#xff0c;广泛用于数据分析、科学计算和编程开发。以下是一些实用的IPython使用技巧&#xff0c;帮助你更高效地使用这个工具。 ### 1. 基本操作 - **启动IPython**: 在终端输入 ipython …

Python酷库之旅-比翼双飞情侣库(16)

目录 一、xlwt库的由来 1、背景和需求 2、项目启动 3、功能特点 4、版本兼容性 5、与其他库的关系 6、示例和应用 7、发展历史 二、xlwt库优缺点 1、优点 1-1、简单易用 1-2、功能丰富 1-3、兼容旧版Excel 1-4、社区支持 1-5、稳定性 2、缺点 2-1、不支持.xls…

[创业之路-116] :制造业企业的必备管理神器-ERP-为什么?传统制造业的转型-数字化、智能化下的需求,ERP是管理面和资金面的数字化、智能化的需要

目录 一、时代背景&#xff1a;制造业企业与智能制造 1.1 传统的制造业 1、概念 2、特点 3、面临的挑战&#xff1a;内卷严重 4、发展趋势 1.2 制造业的转型&#xff1a;数字化 1.3 制造业的转型&#xff1a;智能化 1.4 制造业的转型&#xff1a;无人工厂 1、智能化 …

每日一题——8行Python代码实现PAT乙级1029 旧键盘(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 ​编辑我的写法 代码分析 时间复杂度分析 空间复杂度分析 改进建议 方法 1&#…

leetcode33:搜索旋转数组

题目链接&#xff1a;33. 搜索旋转排序数组 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int search(vector<int>& nums, int target) {int n (int)nums.size();if(!n){return -1;}if(n 1){return nums[0] target ? 0 : -1;}int left 0, …

pytest+parametrize+yaml实例

# 一、yaml格式 # # yaml是一种数据类型&#xff0c;可以和json之间灵活的切换&#xff0c;支持注释、换行、字符串等。可以用于配置文件或编写测试用例。 # # 数据结构&#xff1a;一般是键值对的方式出现。注意编写时值前面必须有空格&#xff0c;键&#xff1a;&#xff08;…

python flask 前奏

如下场景的code&#xff0c; 代码见gitee地址 &#xff1a;pythonflask: pythonflask #1.使用类传参 & 使用字典传参 #2.带参数的url #3.参数带类型的 #4.获取第二页数据 /book/list?page2 #5.if&for 控制及循环 #6.过滤器 #7.自定义过滤器&#xff0c;过滤器命…

Java开发笔记Ⅲ (一些零碎记录)

一些报错处理 找不到注入的对象 可以在 dao 层 的接口上添加 Repository 注解 common 模块报错 Unable to find main class 由于common中只有一些常量与工具类&#xff0c;不需要主类&#xff0c;故出现该错误时只需删除pom文件中的build标签即可解决 网关模块报错 Failed…

如何自定义ArrayList:深入理解Java ArrayList的底层原理

ArrayList是Java集合框架中的一个重要类&#xff0c;它实现了一个可变大小的数组。尽管ArrayList的使用非常简单&#xff0c;但理解其底层实现对优化和调试代码有着重要意义。本文将通过编写一个自定义的ArrayList&#xff0c;帮助你深入理解ArrayList的底层原理。 什么是Arra…

正则表达式常用表示

视频教程&#xff1a;10分钟快速掌握正则表达式 正则表达式在线测试工具&#xff08;亲测好用&#xff09;&#xff1a;测试工具 正则表达式常用表示 限定符 a*&#xff1a;a出现0次或多次a&#xff1a;a出现1次或多次a?&#xff1a;a出现0次或1次a{6}&#xff1a;a出现6次a…

网络安全:探索云安全的最佳实践

文章目录 网络安全&#xff1a;探索云安全的最佳实践引言云安全简介云安全面临的挑战云安全的最佳实践数据加密身份和访问管理定期安全审计 结语 网络安全&#xff1a;探索云安全的最佳实践 引言 在我们之前的文章中&#xff0c;我们讨论了网络安全的多个方面&#xff0c;包括…

2021数学建模A题目–“FAST”主动反射面的形状调节

A 题——“FAST”主动反射面的形状调节 思路&#xff1a;该题主要是通过利用伸缩杆调整FAST反射面&#xff0c;给出合适的调整方案 程序获取 第一题问题思路与结果&#xff1a; 当待观测天体S位于基准球面正上方&#xff0c;结合考虑反射面板调节因素&#xff0c;确定理想抛物…

颜色分类 - LeetCode 热题 98

大家好&#xff01;我是曾续缘&#x1f498; 今天是《LeetCode 热题 100》系列 发车第 98 天 技巧第 3 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 颜色分类 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0…