xachary

摘要： 话接上回[《前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】》](https://www.cnblogs.com/xachary/p/18238704)，这一章继续说说相关的代码如何构思的，如何一步步构建数据模型可供 AStar 算法进行路径规划，最终画出节点之间的连接折线。 阅读全文

摘要： 这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为 曼哈顿距离，且不允许对角线移动。 请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Issue 哟~ github源码 gitee源码 示 阅读全文

摘要： 这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。 请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 相关定义 连接点 记 阅读全文

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

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

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

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

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

摘要： 这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。其实没有想象中那么简单，细节真的比较多。 阅读全文

摘要： 这一章实现了磁贴效果，花了比较多的时间调试，这个功能实现起来比较麻烦，官方是没有像类似 anchorDragBoundFunc 这样的 api，需要在 transformer 的 dragmove 介入修改。 阅读全文