如何在使用Raphael的MS Paint文本框中動態添加文本？

Question

我想像在MS Paint中那樣複製在頁面中編寫文本的相同用戶體驗。就像我們點擊raphael頁面時，一個盒子應該以固定長度出現，並給出輸入文本的空間，這些文本應該被動態添加到rahael頁面中。由於文本長度比首選大小增加，它應該與MS Paint中的相同。

Answer 1

第一個解決方案：爲Raphael的容器創建.on（'click'）事件處理函數，該函數將創建一個文本區域以放置點擊。通過CSS規則設置這個textarea - 絕對定位到點擊的位置;設置寬高;刪除邊框，創建透明背景，以達到您直接將文字輸入到Raphael畫布的幻覺。然後將關鍵字偵聽器附加到textarea（如果您需要輸入新的換行符鍵，請在「Ctrl + Enter」上監聽「Enter」）。回車鍵將創建Raphael.Text元素。

第二種解決方案：點擊畫布後 - 創建一個隱藏的textarea（設置CSS {position：absolute; left：-9999px}來隱藏它，不要使用{display：none}）。還可以在點擊位置創建Raphael.Text對象。然後當你輸入時，文本將添加到隱藏的textarea - 在每個按鍵上讀取它的值並更新Raphael的文本對象。