前端使用 Konva 实现可视化设计器
文章平均质量分 87
前端使用 Konva 实现可视化设计器,满足一般 2D 素材自由布局。
@xachary
Be an entry-level front-end developer for a long time.
展开
-
前端使用 Konva 实现可视化设计器(22)- 绘制图形(矩形、直线、折线)
本章分享一下如何使用 Konva 绘制基础图形:矩形、直线、折线,希望大家继续关注和支持哈!原创 2024-09-10 18:11:11 · 653 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(21)- 绘制图形(椭圆)
本章开始补充一些基础的图形绘制,比如绘制:直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的,并以绘制圆/椭形为实现目标。原创 2024-08-20 18:22:45 · 996 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化
这一章主要分享一下使用 Konva 遇到的性能优化问题,并且介绍一下 UI 美化的思路。原创 2024-08-08 12:32:01 · 1034 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线
本章响应小伙伴的反馈,除了算法自动画连接线(仍需优化完善),实现了可以手动绘制直线、折线连接线功能。原创 2024-08-01 22:56:54 · 653 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(18)- 素材嵌套 - 加载阶段
本章主要实现素材的嵌套(加载阶段)这意味着可以拖入画布的对象,不只是图片素材,还可以是嵌套的图片和图形。原创 2024-07-22 18:30:16 · 528 阅读 · 4 评论 -
前端使用 Konva 实现可视化设计器(17)- 素材嵌套 - 生成阶段
本章主要实现素材的嵌套(生成阶段)这意味着可以拖入画布的对象,不只是图片素材,还可以是嵌套的图片和图形。在未来的章节中,应该可以实现素材成组/解散的效果。原创 2024-07-19 23:05:10 · 661 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(16)- 旋转对齐、触摸板操作的优化
这一章解决两个缺陷,一是调整一些快捷键,使得 Mac 触摸板可以正常操作;二是修复一个 Issue,使得即使素材节点即使被旋转之后,也能正常触发磁贴对齐效果,有个小坑需要注意。原创 2024-06-17 22:25:38 · 531 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(15)- 自定义连接点、连接优化
本章将处理一些缺陷的同时,实现支持连接点的自定义,一个节点可以定义多个连接点,最终可以满足类似图元接线的效果。原创 2024-06-14 22:16:07 · 813 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(14)- 折线 - 最优路径应用【代码篇】
话接上回,这一章继续说说相关的代码如何构思的,如何一步步构建数据模型可供 AStar 算法进行路径规划,最终画出节点之间的连接折线。原创 2024-06-11 12:45:39 · 614 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(13)- 折线 - 最优路径应用【思路篇】
这一章把直线连接改为折线连接,沿用原来连接点的关系信息。关于折线的计算,使用的是开源的 AStar 算法进行路径规划,启发方式为 曼哈顿距离,且不允许对角线移动。原创 2024-06-08 15:52:03 · 766 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(12)- 连接线 - 直线
这一章实现的连接线,目前仅支持直线连接,为了能够不影响原有的其它功能,尝试了2、3个实现思路,最终实测这个实现方式目前来说最为合适了。原创 2024-06-02 10:40:01 · 719 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(11)- 对齐效果
这一章补充一个效果,在多选的情况下,对目标进行对齐。基于多选整体区域对齐的基础上,还支持基于其中一个节点进行对齐。原创 2024-05-18 21:00:00 · 832 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(10)- 对齐线
前端使用 Konva 实现可视化设计器,这次实现对齐线的交互功能。原创 2024-05-11 22:29:18 · 318 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(9)- 另存为SVG
这一章增强了另存为的能力,使用 canvas2svg 实现“另存为SVG”,大概是全网唯一的实例分享了吧。原创 2024-05-07 18:06:42 · 481 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(8)- 预览框
这一章我们实现一个预览框,实时、可交互定位的。当放大的时候,会显示当前可视区域提示框。附带图片说明哟。原创 2024-04-30 21:16:10 · 321 阅读 · 3 评论 -
前端使用 Konva 实现可视化设计器(7)- 导入导出、上一步、下一步
这一章实现导入导出为JSON文件、另存为图片、上一步、下一步。关键在于如何恢复图片的素材,毕竟JSON内部只有部分记录。原创 2024-04-24 22:27:29 · 1066 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(6)- 复制粘贴、删除、位置、zIndex调整
这一章处理一下复制、粘贴、删除、画布归位、层次调整,通过右键菜单控制。其实没有想象中那么简单,细节真的比较多。原创 2024-04-20 08:59:57 · 1092 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(5)- 磁贴效果
这一章实现了磁贴效果,花了比较多的时间调试,这个功能实现起来比较麻烦,官方是没有像类似 anchorDragBoundFunc 这样的 api,需要在 transformer 的 dragmove 介入修改。原创 2024-04-16 22:16:21 · 425 阅读 · 0 评论 -
前端使用 Konva 实现可视化设计器(4)- 快捷键移动元素
这一章实现通过上下左右按键移动所选节点,规则是,按一下移动 1 像素,按着不动则会按 1 像素增速移动,松开按键则恢复原来速度。原创 2024-04-11 22:20:48 · 357 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(3)- 单选、多选、选择框
这一章实现了单选、多选、选择框,根据 konva 地特性,处理的细节比较多,官网示例过于简单,按自己思路实现。原创 2024-04-10 23:12:31 · 1081 阅读 · 1 评论 -
前端使用 Konva 实现可视化设计器(2)- 参考线、svg、gif图片加载
这一章实现了参考线,并完成了对各种图片素材的加载显示,同时阐述了这个系列的基本逻辑坐标系,希望大家能快速理解后面的创作。原创 2024-04-06 20:04:02 · 1310 阅读 · 7 评论 -
前端使用 Konva 实现可视化设计器(1)- 无限画布、比例尺
实现了“无限画布”、“画布移动”、“网格背景”、“比例尺”、“定位缩放”,并简单叙述了它们实现的基本思路。绝对的原创。原创 2024-04-04 22:35:32 · 821 阅读 · 0 评论