抽空摸鱼

loading 我们一般用于页面等待，或者某个模块需要加载的时候，我们一般会使用 loading 组件。 loading 组件的展示一般分为两种，一种是全局 loading...

VTable-Gantt是一款强大甘特图绘制工具，能够帮助开发者轻松创建和管理甘特图。高效，灵活，强大， 丰富的可视化能力...

这一章实现导入导出为JSON文件、另存为图片、上一步、下一步。关键在于如何恢复图片的素材，毕竟JSON内部只有部分记录。...

这一章我们实现一个预览框，实时、可交互定位的。当放大的时候，会显示当前可视区域提示框。附带图片说明哟。...

这一章增强了另存为的能力，使用 canvas2svg 实现“另存为SVG”，大概是全网唯一的实例分享了吧。...

前端使用 Konva 实现可视化设计器，这次实现对齐线的交互功能，单个、多个、多选都可以对齐，同时还能磁贴。...

这一章补充一个效果，在多选的情况下，对目标进行对齐。基于多选整体区域对齐的基础上，还支持基于其中一个节点进行对齐。...

这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。...

这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为 曼哈顿距离，且不允许对角线移动。...

话接上回，这一章继续说说相关的代码如何构思的，如何一步步构建数据模型可供 AStar 算法进行路径规划，最终画出节点之间的连接折线。...

本章将处理一些缺陷的同时，实现支持连接点的自定义，一个节点可以定义多个连接点，最终可以满足类似图元接线的效果。...

这一章解决两个缺陷，一是调整一些快捷键，使得 Mac 触摸板可以正常操作；二是修复一个 Issue，使得即使素材节点即使被旋转之后，也能正常触发磁贴对齐效果，有个小坑需要注...

本章主要实现素材的嵌套（生成阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。在未来的章节中，应该可以实现素材成组/解散的效果。...

本章主要实现素材的嵌套（加载阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。...

本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。...

CSS mask-image 实现边缘淡出过渡效果，关键是淡出，而非降低透明度，需要配合 svg实现。...

手把手使用 SVG + CSS 实现渐变进度环效果，利用的就是 SVG 的 stroke-dasharray。...

这一章主要分享一下使用 Konva 遇到的性能优化问题，并且介绍一下 UI 美化的思路，主要使用 Naive UI。...