konva

前端使用 Konva 实现可视化设计器（16）- 旋转对齐、触摸板操作的优化这一章解决两个缺陷，一是调整一些快捷键，使得 Mac 触摸板可以正常操作；二是修复一个 Issue，使得即使素材节点即使被旋转之后，也能正常触发磁贴对齐效果，有个小坑需要注意。

前端使用 Konva 实现可视化设计器（15）- 自定义连接点、连接优化前面，本示例实现了折线连接线，简述了实现的思路和原理，也已知了一些缺陷。本章将处理一些缺陷的同时，实现支持连接点的自定义，一个节点可以定义多个连接点，最终可以满足类似图元接线的效果。

前端使用 Konva 实现可视化设计器（14）- 折线 - 最优路径应用【代码篇】话接上回《前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】》，这一章继续说说相关的代码如何构思的，如何一步步构建数据模型可供 AStar 算法进行路径规划，最终画出节点之间的连接折线。

前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为曼哈顿距离，且不允许对角线移动。

前端使用 Konva 实现可视化设计器（12）- 连接线 - 直线这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。

前端使用 Konva 实现可视化设计器（11）- 对齐效果这一章补充一个效果，在多选的情况下，对目标进行对齐。基于多选整体区域对齐的基础上，还支持基于其中一个节点进行对齐。

前端使用 Konva 实现可视化设计器（10）- 对齐线请大家动动小手，给我一个免费的 Star 吧~大家如果发现了 Bug，欢迎来提 Issue 哟~github源码

前端使用 Konva 实现可视化设计器（9）- 另存为SVG请大家动动小手，给我一个免费的 Star 吧~大家如果发现了 Bug，欢迎来提 Issue 哟~github源码

前端使用 Konva 实现可视化设计器（8）- 预览框请大家动动小手，给我一个免费的 Star 吧~大家如果发现了明显的 Bug，可以提 Issue 哟~这一章我们实现一个预览框，实时、可交互定位的。

前端使用 Konva 实现可视化设计器（7）- 导入导出、上一步、下一步请大家动动小手，给我一个免费的 Star 吧~这一章实现导入导出为JSON文件、另存为图片、上一步、下一步。

前端使用 Konva 实现可视化设计器（6）请大家动动小手，给我一个免费的 Star 吧~这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。

前端使用 Konva 实现可视化设计器（5）关于第三章提到的 selectingNodesArea，在后续的实现中已经精简掉了。而 transformer 的 dragBoundFunc 中的逻辑，也直接移动 transformer 的 dragmove 事件中处理。

前端使用 Konva 实现可视化设计器（4）给上一章做一个补充，就是实现通过上下左右按键移动所选节点。继续求 Star ，希望大家多多一键三连，十分感谢大家的支持~

前端使用 Konva 实现可视化设计器（3）github/gitee Star 终于有几个了！从这章开始，难度算是（或者说细节较多）升级，是不是值得更多的 Star 呢？！

前端使用 Konva 实现可视化设计器（2）作为继续创作的动力，继续求 github Star 能超过 50 个（目前惨淡的 0 个），望多多支持。源码示例地址

react中使用react-konva实现画板框选内容本文用到的react-konva是基于react封装的图形绘制。Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva 提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你可以使用 Konva 在舞台上绘制图形，给图形添加事件，移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。