前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前言
今天继续和大家分享一下几何画板的图层管理和实时缩略图的实现。
demo演示
按照笔者的写作习惯, 这里先和大家演示一下实现的效果:
可以看到通过操作图层面板我们可以轻松的切换到某一个元素并对元素进行编辑, 同时在每次操作之后右下角的缩略图会实时展示画布最新的变动。
源码地址: https://gitee.com/lowcode-china/euryd
接下来就让我们接着之前的内容, 来实现我们的图层管理面板和实时缩略图。
技术实现
接下来我还是用大家最最熟悉的 vue3 + ts 来实现, 其他框架实现原理类似, 感兴趣的朋友也可以举一反三, 自行实现。
图层管理面板的实现
图层管理面板主要是为了更方便管理和操作画布中的元素, 比如 PhotoShop 里的图层管理:
或者 H5-Dooring 页面制作平台的图层面板:
我们可以从这些编辑器中总结出图层管理的几个主要功能:
- 定位或切换元素
- 显示隐藏元素
- 编辑元素(如删除)
- 批量操作(如多选批量删除元素等)
- 调整元素位置(顺序)
所以说我们在设计图层面板的时候也可以考虑以上几个点, 接下来我就来构建一下图层面板, 并实现切换元素,删除指定元素 的功能。
1. 构建图层面板
由于图层面板的元素和画布实际的元素数据是一一对应的, 所以我们可以直接用 canvasBox 来渲染图层列表, 这里回顾一下 canvasBox 的数据结构:
其中每个元素都包含如下三个关键属性:
- key 元素的唯一id
- type 元素的类型(矩形, 圆形, 线等)
- style 元素的样式
这样我们就可以利用 key 来轻松的定位元素, 如果画布中元素很多(比如复杂的设计稿), 我们还可以给图层面板添加搜索和分类功能, 方便我们更高效的定位元素。
一个简单实现的案例如下:
css样式如下:
这里分享一下具体实现效果:
由于我们应用是用vue3的组合式函数写的, 上图中涉及到的切换元素和删除元素的方法也很简单, 具体如下:
所以说图层管理的本质是基于已有的图元进行数据结构层面的操作。
当然大家也可以扩展我们的画板应用, 让它支持多选, 搜索, 排列顺序等功能。
实时缩略图的实现
我们之前也许看过一些网站在浏览页面的时候会出现小的缩略图, 可以实时展示当前页面的情况, 比如:
这里就简单和大家分享一下实现方案。
因为我们在画布中的每一次操作都会被记录在 recordManager (记录管理器, 也就是上篇文章介绍的撤销重做的历史快照集合)中, 我们只需要在每次操作后基于当前 dom 生成一张图片即可(画布如果是canvas实现的, miniMap实现起来会更简单)。
所以说我们现在的问题就变成了如何基于 dom 生成图片快照的问题了, 当然这里也有解决方案, 核心思路就是将 dom 转换成 xml 结构,然后放在标签内,借助 svg 的处理能力将 dom 结构转换成 svg 标签,然后将svg标签作为图片的 base64 地址,最后用 a 标签实现下载。不过需要注意以下两个细节:
- img标签的地址必须是base64字符串, 所以我们需要用canvas转换成base64
- canvas标签直接转成xml是无法显示的, 所以我们需要将canvas转换成base64,再放入图片的src内
通过以上方式我们就可以原生实现将 dom 转换为图片。当然市面上也有比较成熟的方案, 比如:
- html2canvas
- dom2image
那这里我就用 dom2image 带大家一起实现一下 miniMap。
首先我们在vite 工程中安装该库:
具体实现:
好了, 以上就实现了我们的miniMap 缩略图功能, 演示如下:
相关文章
- Java-什么是面向对象
- 苹果MacOS_虚拟机安装详细过程
- 21条最佳实践,全面保障 GitHub 使用安全
- 字节后端实习一面凉经
- 面向接口编程的好处-介绍API数据接口的好处!
- C语言大学生考试全面题库
- 数据治理很抽象吗
- Elasticsearch互联网主流分布式全文检索框架实战-ElasticStack(上)v7.14.0
- 分布式全局ID生成器原理剖析及非常齐全开源方案应用示例
- ElasticJob分布式任务调度应用v2.5.2
- 云原生概念你了解多少
- 主流微服务一站式解决方案Spring Cloud Alibaba入门看这篇就足够了-开篇v2.2.1.RELEASE
- Pulsar云原生分布式消息和流平台v2.8.0
- 回顾2022,展望2023,一个普通98年程序员的自述和分享
- SpringBoot+Mybatis-plus整合easyExcel批量导入Excel到数据库+导出Excel
- Springboot整合策略模式概念->使用场景->优缺点->企业级实战
- 三台服务器使用docker搭建redis一主二从三哨兵,概念-搭建-整合springboot
- IDEA中给源码添加自己注释——private-notes插件安装使用
- docker搭建Elasticsearch、Kibana、Logstash 同步mysql数据到ES
- Spark简单介绍,Windows下安装Scala+Hadoop+Spark运行环境,集成到IDEA中