原生js实现简单的svg编辑器

最新推荐文章于 2024-08-08 08:31:06 发布

fuux

最新推荐文章于 2024-08-08 08:31:06 发布

阅读量2.6k

点赞数 3

分类专栏： JavaScript 文章标签： javascript js svg 前端 html5

本文链接：https://blog.csdn.net/qq_42586895/article/details/106512954

版权

本文介绍如何使用原生JavaScript实现一个简单的SVG编辑器，支持创建和编辑rect、circle、ellipse、line四种图形。项目提供在线预览，通过DOM操作和SVG基础知识，实现图形创建、属性编辑等功能。编辑器具备自适应布局，工具栏包括图形形状和外观控制。文章还涵盖了事件委托、图形选择、属性更新等关键实现步骤。

摘要由CSDN通过智能技术生成

原生js实现简单的svg编辑器

简单的实现了rect、circle、ellipse、line四个简单的基础图形的创建和编辑，这篇文章对于JavaScript中Dom操作和svg基础学习有很大帮助。
项目在线预览：http://coolxiang.top/svgeditor

编辑器预览图（做了只丑兔子花了我好长时间）：
在这里插入图片描述
接下来说一下实现原理和代码讲解。

页面样式和布局

HTML和CSS相对来说比较简单，这里我不多介绍了。只是说一下这个页面使用rem和flexible自适应布局。另外通过flex实现左边工具栏固定rem宽度，右侧自适应大小宽度。
工具栏使用input滑动条和color选择器控制图形。

开始介绍js

首先声明一些数据，比如每个图形的属性默认值

有一些私有的属性和公有的，我们区分开

// 创建svg时需要的常量
const XMLNS = 'http://www.w3.org/2000/svg';
// 私有属性
const privateAttrs = {
   
rect: {
   x:10,y:10,width:200,height:100,rx:0,ry:0},
circle: {
   cx:200,cy:200,r:50},
ellipse: {
   cx:200,cy:200,rx:80,ry:30},
line: {
   x1:100,y1:100,x2:200,y2:200}
}
// 公共属性
const publicAttrs = {
   
fill: '#ffffff',
stroke: '#ff0000'
}

我们可以先统计以下我们需要实现哪些功能

点击创建工具栏事件，创建图形，并且生成形状和外观工具栏。
改变形状工具栏中的滑动条，修改右侧图形形状（私有属性）。
改变外观工具栏中的滑动条或选择器，修改图形颜色外观（公有属性）。
点击svg图形，选中图形生成对应的工具栏并且同步数据。
考虑到右侧画板为自适应大小，因此滑动条中设置坐标的最大值应跟随页面大小变化，这里再添加一个resize事件。

以上就是这个编辑器的主要功能，根据这些功能我们开始一步一步实现。

获取DOM对象

// 右侧画板
const editorMap = document.querySelector('.editor-map');
// 创建工具
const createTools = document.querySelector('.create');
// 形状工具
const figureTools = document.querySelector('.figure ul');
// 外观工具
const appearanceTools = document.querySelector