F-star / suika

A Web Graphics Editor Built with Canvas. 基于 Canvas 实现的图形编辑器
https://blog.fstars.wang/app/suika/
MIT License
535 stars 85 forks source link

绘制工具在拖拽过程中,交替切换 Shift, Space 键,表现不一致 #159

Closed pansong291 closed 5 months ago

pansong291 commented 5 months ago

步骤:

  1. 选择 Rect 绘制工具。
  2. 在画布上按下鼠标左键,并托拽一个长方形,并保持鼠标左键按下不松开。
  3. 按下 Space 键,保持鼠标拖拽。
  4. 按下 Shift 键,保持鼠标拖拽(此时已失去矩形的平移变换能力)。

步骤:

  1. 选择 Rect 绘制工具。
  2. 在画布上按下鼠标左键,并托拽一个长方形,并保持鼠标左键按下不松开。
  3. 按下 Shift 键,保持鼠标拖拽。
  4. 按下 Space 键,保持鼠标拖拽。
  5. 松开 Shift 键,保持鼠标拖拽(此时会暂时失去平移变换,马上又会恢复平移变换)。
pansong291 commented 5 months ago

另外,拖拽过程中,按住 Alt 键,再按 Space 会触发浏览器窗口菜单,系统是 Windows。

F-star commented 5 months ago

另外,拖拽过程中,按住 Alt 键,再按 Space 会触发浏览器窗口菜单,系统是 Windows。

首先非常感谢你提的 issue。

然后的话,第二个问题是无法处理,因为在 windows 系统中,alt + space 快捷键的优先级是高于浏览器的,即使用 event.preventDefault() 也无法阻止。

F-star commented 5 months ago

步骤:

  1. 选择 Rect 绘制工具。
  2. 在画布上按下鼠标左键,并托拽一个长方形,并保持鼠标左键按下不松开。
  3. 按下 Space 键,保持鼠标拖拽。
  4. 按下 Shift 键,保持鼠标拖拽(此时已失去矩形的平移变换能力)。

步骤:

  1. 选择 Rect 绘制工具。
  2. 在画布上按下鼠标左键,并托拽一个长方形,并保持鼠标左键按下不松开。
  3. 按下 Shift 键,保持鼠标拖拽。
  4. 按下 Space 键,保持鼠标拖拽。
  5. 松开 Shift 键,保持鼠标拖拽(此时会暂时失去平移变换,马上又会恢复平移变换)。

因为我是在 macOS 上开发的,macOS 是没问题的。

经测试,我确认是 windows 和 macOS 的按键行为有一点不一样。

windows 的 keyup 只执行了一次(shiftLeft);macOS 连续执行了两次(shiftLeft, shift + space)。

为了解决不同平台的兼容性,我会换个写法,一会我会把代码合上来。

pansong291 commented 5 months ago

windows 的 keyup 只执行了一次(shiftLeft);macOS 连续执行了两次(shiftLeft, shift + space)。

这段话没看懂,究竟是哪个步骤在什么时候执行的 keyup,两次又分别是哪两次呢?

F-star commented 5 months ago

windows 的 keyup 只执行了一次(shiftLeft);macOS 连续执行了两次(shiftLeft, shift + space)。

这段话没看懂,究竟是哪个步骤在什么时候执行的 keyup,两次又分别是哪两次呢?

说错了,按住 space 不放,然后再按住 shift,keydown 事件