leaferjs / leafer-ui

一款好用的 Canvas 引擎,革新的开发体验,用于高效绘图 、UI 交互、图形编辑。A user-friendly Canvas engine with a revolutionary development experience, for efficient drawing, UI interactions, and graphic editing.
https://www.leaferjs.com
MIT License
2.59k stars 92 forks source link

绘制事件如何触发 #174

Closed canbaoSama closed 3 months ago

canbaoSama commented 4 months ago

请问一下编辑器里,左键按下,然后移动鼠标,这个时候会形成方框。这个事件是如何触发的,是那个事件呢? 我现在想添加一个按住W然后直接移动鼠标就能触发这个绘制得功能

leaferjs commented 4 months ago

目前还没有对外提供这个功能,可以参考EditSelect里的drag相关方法自己实现框选功能(或等我们后面暴露手动操作的方法):

https://github.com/leaferjs/in/blob/main/packages/editor/src/display/EditSelect.ts

canbaoSama commented 4 months ago

ok。 我感觉可以暴露一下,毕竟有些需求确实需要用到。 谢谢大佬。

leaferjs commented 4 months ago
  1. 我怀疑你是不是想要快速绘制图形?如果是创建图形的话可以看一下这个示例,事件中直接有一个拖拽出的Bounds:

https://leaferjs.com/ui/example/editor/create.html

  1. 如果是手动创建框选区域并选中元素,那需要再等等~
canbaoSama commented 4 months ago

是的,就是想快速创建图形

canbaoSama commented 4 months ago

你发的这个实例的事件需要按住鼠标左键才能触发好像,跟我直接按住W拖动鼠标就实现绘制还不一样。 我查了一下,是不是只有PointerEvent.Move事件才能满足鼠标移动直接监听到的

leaferjs commented 4 months ago

看一下Bounds这个类,可以通过添加坐标点,组成一个bounds区域

canbaoSama commented 4 months ago

这个Bounds类没看明白,是专门用来计算的吗? 可是我现在连触发我想要的事件都做不到?

leaferjs commented 4 months ago

有一种最简单的办法,通过监听KeyEvent事件,模拟触发鼠标按下和抬起事件

https://leaferjs.com/ui/reference/event/simulation.html

canbaoSama commented 4 months ago

是的,我目前就是这样做的