search

leaferjs / ui

一款好用的 Canvas 渲染引擎，革新的体验。高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。
https://www.leaferjs.com
MIT License
2.32k stars 81 forks source link

绘制事件如何触发 #174

Closed canbaoSama closed 1 month ago

canbaoSama commented 1 month ago

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

leaferjs commented 1 month ago

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

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

canbaoSama commented 1 month ago

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

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

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

  1. 如果是手动创建框选区域并选中元素，那需要再等等～
canbaoSama commented 1 month ago

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

canbaoSama commented 1 month ago

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

leaferjs commented 1 month ago

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

canbaoSama commented 1 month ago

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

leaferjs commented 1 month ago

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

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

canbaoSama commented 1 month ago

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