HTML5キャンバステキスト編集

HTML5キャンバスにテキストを入力しましたfillText(); 編集可能にして値を変数に読み込む方法はありますか？テキストは、複雑な多角形の中に書き込まれるため、キャンバスの内側にある必要があります。HTML5キャンバステキスト編集

出典

2011-07-25 Srini

[fabric.js]（http://kangax.github.com/fabric.js/demos/kitchensink/index.html）のようなライブラリを使用すると、テキストオブジェクトを作成したり、編集したりすることができます削除、クローン、移動、回転、スケールなど... デモページで[テキストを追加]をクリックし、それを選択してキャンバスの下のテキストエリアで編集します。また、下線付き、ストロークスルー、または影付きなど、テキスト表示のさまざまなオプションがあります。 – kangax

@kangax Fabric.jsを使用してテキストオブジェクトをリアルタイムで編集する例はありますか？キッチンシンクのデモでは、テキストを追加できます。その後、拡大縮小や回転が可能ですが、テキストコンテンツを簡単に編集できますか？ –

@MathiasBynensキッチンシンクでは、スタンドアロンのテキストエリアのテキストを編集することができ、それはすぐにキャンバスに反映されます（キャンバスの下にあります）。私たちは[printio.ru]（http://printio.ru/tees/new）で同じアプローチを使用しています。このアイデアは他の場所でもほとんど変わっていません（例：[easel.ly]（http： /www.easel.ly/）、編集中のテキストのすぐ隣にテキストエリアが表示されます）。 – kangax

キャンバスからテキストを取得することはできません。あなたがする必要があるのは、を使用してキャンバスをレンダリングする前に、テキストを変数に保存することです。キャンバス内のテキストを編集する場合は、キャンバスを再度ペイントし、編集されたテキストをfillText();でレンダリングするときに、変数からテキストを再度読み取る必要があります。

出典

2011-07-25 11:10:36 Jonas

テキストがキャンバスに描画されると、ピクセルになります。元のテキスト（およびポリゴンのアウトライン）は保存されません。あなたはjpgまたはpngファイルから取得できないようにキャンバスから戻すことはできません。

JavaScriptでキャンバスを描画する場合は、別の場所にテキストを保存できます。そうでなければ、あなたはそれをOCRする必要があります。

出典

2011-07-26 10:10:28

シマウマを見てください。これは、HTMLキャンバス上でレンダリングするウィジェットのセットであり、ウィジェットの1つはテキストエディタです。それは無料のオープンソースのようで、jsファイルへのリンクを提供するだけでなく、GitHubにGitアーカイブを持っています。 http://www.zebkit.org/

出典

2013-10-05 21:04:04 froggythefrog

HTML5キャンバステキスト編集

答えて

関連する問題