jquery - 如何使用 Raphael 在 MS Paint 文本框中动态添加文本？

Question

我想复制与我们在 MS Paint 中相同的用户体验，即在页面中编写文本。就像当我们点击 rahael 页面时，应该会出现一个固定长度的框，并为输入应该动态添加到 rahael 页面的文本留出空间。随着文本长度增加超过首选大小，它应该像在 MS Paint 中一样折叠。

Answer 1

第一个解决方案：为 Raphael 的容器创建 .on('click') 事件处理程序，它将在单击位置创建一个文本区域。通过 CSS 规则设置此文本区域的样式 - 绝对定位到点击位置；设置宽高；删除边框，制作透明背景，以实现您将文本直接输入到 Raphael 画布的错觉。然后将键侦听器附加到文本区域（如果您需要 Enter 键来换行，请在“Ctrl+Enter”上听“Enter”）。Enter 键将创建 Raphael.Text 元素。

第二种解决方案：点击画布后 - 创建一个隐藏的文本区域（设置 CSS {position: absolute; left: -9999px} 隐藏它，不要使用 {display: none}）。还要在单击位置创建 Raphael.Text 对象。然后当您输入时，文本将添加到隐藏的文本区域 - 在每次按键时读取其值并更新 Raphael 的文本对象。