合集-前端使用 Konva 实现可视化设计器

前端使用 Konva 实现可视化设计器（2）- 参考线、svg、gif图片加载
摘要：这一章实现了参考线，并完成了对各种图片素材的加载显示，同时阐述了这个系列的基本逻辑坐标系，希望大家能快速理解后面的创作。 阅读全文
posted @ 2024-04-06 20:09 xachary 阅读(2187) 评论(0) 推荐(2)
前端使用 Konva 实现可视化设计器（1）- 无限画布、比例尺
摘要：实现了“无限画布”、“画布移动”、“网格背景”、“比例尺”、“定位缩放”，并简单叙述了它们实现的基本思路。绝对的原创。 阅读全文
posted @ 2024-04-05 09:20 xachary 阅读(3983) 评论(2) 推荐(6)
前端使用 Konva 实现可视化设计器（4）- 快捷键移动元素
摘要：这一章实现通过上下左右按键移动所选节点，规则是，按一下移动 1 像素，按着不动则会按 1 像素增速移动，松开按键则恢复原来速度。 阅读全文
posted @ 2024-04-11 22:24 xachary 阅读(638) 评论(4) 推荐(0)
前端使用 Konva 实现可视化设计器（3）- 单选、多选、选择框
摘要：这一章实现了单选、多选、选择框，根据 konva 地特性，处理的细节比较多，官网示例过于简单，按自己思路实现。 阅读全文
posted @ 2024-04-10 23:20 xachary 阅读(1119) 评论(0) 推荐(0)
前端使用 Konva 实现可视化设计器（5）- 磁贴效果
摘要：这一章实现了磁贴效果，花了比较多的时间调试，这个功能实现起来比较麻烦，官方是没有像类似 anchorDragBoundFunc 这样的 api，需要在 transformer 的 dragmove 介入修改。 阅读全文
posted @ 2024-04-16 22:20 xachary 阅读(795) 评论(1) 推荐(0)
前端使用 Konva 实现可视化设计器（6）- 复制粘贴、删除、位置、zIndex调整
摘要：这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。其实没有想象中那么简单，细节真的比较多。 阅读全文
posted @ 2024-04-20 09:03 xachary 阅读(934) 评论(1) 推荐(0)
前端使用 Konva 实现可视化设计器（7）- 导入导出、上一步、下一步
摘要：这一章实现导入导出为JSON文件、另存为图片、上一步、下一步。关键在于如何恢复图片的素材，毕竟JSON内部只有部分记录。 阅读全文
posted @ 2024-04-24 22:25 xachary 阅读(684) 评论(0) 推荐(0)
前端使用 Konva 实现可视化设计器（8）- 预览框
摘要：这一章我们实现一个预览框，实时、可交互定位的。当放大的时候，会显示当前可视区域提示框。附带图片说明哟。 阅读全文
posted @ 2024-04-30 21:28 xachary 阅读(607) 评论(0) 推荐(2)
前端使用 Konva 实现可视化设计器（9）- 另存为SVG
摘要：这一章增强了另存为的能力，使用 canvas2svg 实现“另存为SVG”，大概是全网唯一的实例分享了吧。 阅读全文
posted @ 2024-05-07 18:11 xachary 阅读(688) 评论(0) 推荐(1)
前端使用 Konva 实现可视化设计器（10）- 对齐线
摘要：前端使用 Konva 实现可视化设计器，这次实现对齐线的交互功能，单个、多个、多选都可以对齐，同时还能磁贴。 阅读全文
posted @ 2024-05-11 22:33 xachary 阅读(528) 评论(1) 推荐(2)
前端使用 Konva 实现可视化设计器（11）- 对齐效果
摘要：这一章补充一个效果，在多选的情况下，对目标进行对齐。基于多选整体区域对齐的基础上，还支持基于其中一个节点进行对齐。 阅读全文
posted @ 2024-05-18 21:01 xachary 阅读(516) 评论(1) 推荐(1)
前端使用 Konva 实现可视化设计器（12）- 连接线 - 直线
摘要：这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。 请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 相关定义 连接点 记 阅读全文
posted @ 2024-06-02 10:43 xachary 阅读(709) 评论(1) 推荐(2)
前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】
摘要：这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为 曼哈顿距离，且不允许对角线移动。 请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Issue 哟~ github源码 gitee源码 示 阅读全文
posted @ 2024-06-08 16:09 xachary 阅读(619) 评论(0) 推荐(0)
前端使用 Konva 实现可视化设计器（14）- 折线 - 最优路径应用【代码篇】
摘要：话接上回[《前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】》](https://www.cnblogs.com/xachary/p/18238704)，这一章继续说说相关的代码如何构思的，如何一步步构建数据模型可供 AStar 算法进行路径规划，最终画出节点之间的连接折线。 阅读全文
posted @ 2024-06-11 12:47 xachary 阅读(509) 评论(0) 推荐(0)
前端使用 Konva 实现可视化设计器（15）- 自定义连接点、连接优化
摘要：本章将处理一些缺陷的同时，实现支持连接点的自定义，一个节点可以定义多个连接点，最终可以满足类似图元接线的效果。 阅读全文
posted @ 2024-06-14 19:31 xachary 阅读(594) 评论(0) 推荐(2)
前端使用 Konva 实现可视化设计器（16）- 旋转对齐、触摸板操作的优化
摘要：这一章解决两个缺陷，一是调整一些快捷键，使得 Mac 触摸板可以正常操作；二是修复一个 Issue，使得即使素材节点即使被旋转之后，也能正常触发磁贴对齐效果，有个小坑需要注意。 阅读全文
posted @ 2024-06-17 22:30 xachary 阅读(463) 评论(1) 推荐(2)
前端使用 Konva 实现可视化设计器（17）- 素材嵌套 - 生成阶段
摘要：本章主要实现素材的嵌套（生成阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。在未来的章节中，应该可以实现素材成组/解散的效果。 阅读全文
posted @ 2024-07-19 23:11 xachary 阅读(199) 评论(0) 推荐(0)
前端使用 Konva 实现可视化设计器（18）- 素材嵌套 - 加载阶段
摘要：本章主要实现素材的嵌套（加载阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。 阅读全文
posted @ 2024-07-22 18:31 xachary 阅读(413) 评论(0) 推荐(2)
前端使用 Konva 实现可视化设计器（19）- 连接线 - 直线、折线
摘要：本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。 阅读全文
posted @ 2024-08-01 23:02 xachary 阅读(682) 评论(1) 推荐(3)
前端使用 Konva 实现可视化设计器（20）- 性能优化、UI 美化
摘要：这一章主要分享一下使用 Konva 遇到的性能优化问题，并且介绍一下 UI 美化的思路，主要使用 Naive UI。 阅读全文
posted @ 2024-08-08 12:34 xachary 阅读(797) 评论(0) 推荐(1)
前端使用 Konva 实现可视化设计器（21）- 绘制图形（椭圆）
摘要：本章开始补充一些基础的图形绘制，比如绘制：直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的，并以绘制圆/椭形为实现目标。 阅读全文
posted @ 2024-08-20 18:24 xachary 阅读(668) 评论(0) 推荐(1)
前端使用 Konva 实现可视化设计器（22）- 绘制图形（矩形、直线、折线）
摘要：本章分享一下如何使用 Konva 绘制基础图形：矩形、直线、折线，希望大家继续关注和支持哈！ 阅读全文
posted @ 2024-09-10 18:12 xachary 阅读(467) 评论(0) 推荐(0)
前端使用 Konva 实现可视化设计器（23）- 绘制曲线、属性面板
摘要：本章分享一下如何使用 Konva 绘制基础图形：曲线，以及属性面板的基本实现思路，希望大家继续关注和支持哈（多求 5 个 Stars 谢谢）！ 阅读全文
posted @ 2024-09-26 18:04 xachary 阅读(943) 评论(4) 推荐(2)