text - ラファエルでテキストを動的に変更する方法

Question

わかりました、これは基本的に私が今やっていることです。ラファエルのテキスト オブジェクトを作成します。クリック イベントを使用して、ダイアログ ボックスを開きます。次に、ダイアログ ボックスのテキストを変更します。これは私がこれを実装したい方法ではありません。私の実装は、ユーザーがテキスト オブジェクトをクリックして、入力中にテキストを変更できる、MS ペイントでテキストを作成する方法に多少似たものにしたいと考えています。ラファエル テキスト オブジェクトを使用してこれを実装する方法を知っている人はいますか?

Answer 1

簡単な解決策は<textarea>、ユーザーがテキストの編集を開始したときに を作成することです。現在のテキストを入力して、テキスト オブジェクトの上に配置します。次に、フォーカスを失ったら ( onblur)、テキスト領域を削除し、テキストをテキスト オブジェクトにコピーします。

テキストオブジェクトのテキストを「その場で」編集したい場合は、非表示のテキストフィールドにユーザーが入力できるようにすることができます。ただし、この場合、すべてのカーソルと選択ロジックを自分で実装する必要があります。このフィドルを参照してください（右矢印と左矢印を使用してカーソルを移動することのみが許可され、シフトしてテキストを選択してコピーして貼り付けることができます）。

または、 contenteditableが SVG コンテンツで機能するかどうかはわかりませんが、機能する場合は非常に簡単な解決策になります。