0

私はCodeIgniter2を使用して管理領域を構築しています。この領域では、テキストオーバーレイに関して、管理者は「空白」の特定の画像を追加できます。画像をアップロードするときは、通常のユーザーが目的のテキストを追加できる特定のパスを定義する方法が必要です。基本的に、これはシャツ、マグカップ...あらゆるタイプのカスタム印刷可能な表面に使用できます。

パスは、直線、ベジェ曲線、および円をサポートする必要があります。また、1つのベースイメージが複数のパスをサポートする必要があります。

RaphaelJSライブラリとSVGを使用しました。

これが私の現在のアプローチです：

  • InkScapeでベース画像を開き、パスを描画します
  • パスをSVGとしてエクスポートします
  • そのパスを使用してRaphaelJSパスを作成します
  • そのパスにテキストを配置します

このアプローチの問題は、曲線/円形のパスに配置すると文字がかなり奇妙に表示され、必要な場所に正確に配置できないため、オフセット文字がいくつかあることです。

これは、この種のものが.netを使用して実装されたサンプルサイトです。基本的に、1行目、2行目などにテキストを入力すると、右側のバッジに表示されます。また、定義された領域にテキストを保持するため、領域に収まるよりも多くのテキストを入力すると、収まるようにテキストが圧縮されます。

誰かが私が何を探すべきかについて私に何か指針を持っていますか？主なポイントは次のとおりです。パス/リー​​ジョンは管理者が定義する必要があり（JSまたはサードパーティのアプリケーションを使用）、テキストはそれらのパスに配置する必要があります。

これはHTML5を使用して行う必要はなく、あらゆる種類のPHPライブラリを使用して行うこともできます。

4

1 に答える 1

0

そうです、パスをユーザーではなく管理者が定義できる場合は、パスをInkscapeで描画し、Inkscapeにサーバー上でレンダリングを実行させます。これはコマンドラインで簡単に実行できますが、もちろんInkscapeをインストールするにはサーバーへの管理者アクセスが必要です。次に、パスがテキストをサポートする必要がidある場合は、アプリケーションで認識できる特別なパスを指定し、PHPのXMLライターの1つを使用してSVGファイルを書き直し、Inkscapeを使用してPNG出力に変換します。

ユーザーからテキスト入力を受け取った場合は、ある程度のクリーニング（アングルブラケットをユーザーのhtmlentityに交換するなど）を行う必要がありますが、それ以外の場合は非常に簡単です。私の開発マシンでファイルを処理するのに約0.7秒かかります。ロードの方法で多くのことが予想される場合は、キューで処理できます。

編集：Raphaelほど高速ではありませんが、ブラウザーのサポートに関してははるかに信頼性があります。Raphaelについてはあまり調べていませんが、私が行っているテキストフローの処理は、クライアント側で十分にサポートされていないことは間違いありません（とにかく）。

編集2：これは私の現在の仕事がどのように見えるかです。左側の項目はSVGテンプレートであり、ブラウザー内で低解像度のPNG画像としてレンダリングされ、右側の入力ボックスは編集ボックスです（記号を含む最後の項目は、自家製のマークアップ構文を使用しています。 '疑問に思っています）。現在、赤いアウトラインは、InkscapeCLIを使用して取得されるバウンディングボックスです。したがって、アウトラインを検出できるため、あなたの場合、一部のテキストがオーバーランした割合を判断し、それに応じて要素font-size内を減らすことができます。tspan（「変形」と言うときは、「サイズを小さくする」という意味だと思います）。

それは事実上、貧乏人のオートフィット機能になるでしょう。そのためにSVGで直接サポートがあればいいのですが、私はそれがあることに気づいていません。しかし、それは上記の提案があなたの場合にうまくいくように聞こえます。

Inkscapeレンダリングのスナップショット

于 2012-04-24T14:55:01.310 に答える