小编点评

# Konva.js：优化快捷键与磁贴对齐 这一章主要解决了两个缺陷，包括调整快捷键以适应 Mac 触摸板，以及修复素材节点旋转后磁贴对齐失效的问题。 ## 1. 调整快捷键 为了使 Mac 触摸板能够正常操作，我们决定调整部分快捷键。具体如下： - 将 `Cmd` + `R` 键更新为刷新页面 - 将 `Cmd` + `Backspace` 键更新为删除页面 此外，缩放功能也进行了优化，现在缩放以触摸板双指缩放为准。若您需要了解更多关于快捷键和缩放的信息，请 [移步查看代码差异](https://github.com/konvajs/konva/blob/master/src/Render/handlers/SelectionHandlers.ts)。 ## 2. 修复磁贴对齐问题 在修复磁贴对齐问题时，我们注意到一个特殊情况：即使素材节点被旋转，也需要正常触发磁贴对齐效果。为了解决这个问题，我们将磁贴的 `attract` 功能移动到了一个新的 `AttractTool` 中，并新增了 `AttractDraw` 辅助调试。 在处理多选素材节点时，我们需要通过 transformer 获取正确的区域信息。经过一番努力，我们发现 transformer 中必定包含一个名为 `back` 的层，它正是我们需要的区域信息来源。这样一来，我们就可以正确地计算磁贴坐标了。更多细节请参阅 [相关代码示例](https://github.com/konvajs/konva/blob/master/src/Render/handlers/SelectionHandlers.ts)。 ## 结语 感谢您阅读本文，如果您发现任何问题或错误，请随时通过 [GitHub](https://github.com/konvajs/konva) 提交 issue。您的支持是我们前进的动力！如果您喜欢本文，请给项目点个星，您的认可将激励我们继续改进。再次感谢您的支持！

正文

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

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

快捷键、触摸板的优化

• 兼容 MacOS Command 键
• Ctrl(Win)/Command(Mac) + R 刷新
• 退格键也作为删除键
• 缩放以触摸板双指缩放为准（即鼠标改为上滚轮放大、下滚轮缩小）

请移步查看代码差异，比较简单。

旋转对齐的支持

把磁贴 attract 移动至新增的 AttractTool 中，并新增 AttractDraw 方便调试

先看看 Issue 反馈的问题：

以水平方向上为例，没有旋转之前，逻辑上的对齐线大概如此：

只是，旋转之后，按原来计算坐标+宽高的方式就不合适了：

这里，符合直觉的，应该如下：

正好，官方有个合适的 API 可以获得上面黄线的矩形区域信息，就是 getClientRect。
如果仅考虑单个素材节点，直接获取该节点的 getClientRect 信息，替换掉此前的计算逻辑即可。
可是，这里考虑的还有多选的情况，这个时候就应该通过 transformer 获取了，这里有一个坑，如下：

通过 transformer 的 getClientRect，以为获得左边的区域信息，可事实是左边那样。
这就导致了，计算的磁贴坐标都出现的偏移。
上结论，按 Konva 定结构特点， transformer 必定包含一个 name 为 back 的层，正正是上面左边需要的区域，获取该区域信息就正确了。

// /src/Render/handlers/SelectionHandlers.ts

// 原来通过以下的 x、y、width、height 信息计算：
const pos = this.render.transformer.position()
const width = this.render.transformer.width()
const height = this.render.transformer.height()

需改为

// /src/Render/handlers/SelectionHandlers.ts

// 现在改为通过以下 rect 信息的 x、y、width、height 信息计算：
const rect = this.render.transformer.findOne('.back')!.getClientRect()

最新在线示例，提供了测试调试用例，可以查看连接线的变化：

这样，按新的区域信息计算就满足了：

More Stars please！勾勾手指~

源码

gitee源码

示例地址