仿流程图的波形模拟页面开发 - 02 canvas下如何实现用户的文本输入？

对当前，面临的一个问题是实现用户输入文字内容到canvas中去。当然，直接使用canvasInput是很好的方案，但是不适合本案。

一种常规的解决方案是同步一个input窗口到canvas上，这种方法不需要自己处理键盘以及文本处理，只需要将值传递到某个变量上保存，输入完毕后将input标签隐藏，将文字内容画到canvas上。问题是界面UI能否统一，以及处理拖动事件的复杂度会上升。

另一种不太常规的方法是通过zrender同步模拟用户的输入过程。点击矩形输入框后，显示一个模拟光标，接着监听键盘事件，如果用户进行了输入，就将输入的内容画到canvas上。问题是这样处理文字的过程比较复杂而且牵扯到文本编辑的逻辑处理和canvas监听键盘事件。

 

总的来说第一个方案更合适一些，下一步我会对这个进行摸索尝试。哎，我最讨厌dom操作了啊。

---

突然想到我可以画一个和节点同样大小的div，div里面放置输入框，通过vue绑定div的位置属性，这样可以方便一些。