主流の T シャツ サイトで見られるシャツ デザイナーに似たものを作るように依頼しているクライアントがいます。
必要なのは、ユーザーがテキスト入力にテキストを入力し、テキストを画像の周りにドラッグできることです。主に 2 つの懸念事項があり、それらを理解できれば、このプロジェクトを実行できるようになります...
懸念事項 1: テキストを画像の周りにドラッグするにはどうすればよいですか? 私の考えは、ドラッグ可能な Jquery UI を使用してページ内のテキストをドラッグすることです。jquery を使用してテキスト入力の値を取得し、ドラッグ可能な div に配置します。これは良い計画のように聞こえますか?
懸念事項 2: サイトの所有者に画像を渡すことができるように、彼のシャツの画像と彼が望む位置にあるテキストを含むメイン div のスナップショットを取得するにはどうすればよいですか? div のスナップショットを取得するスクリプトはありますか? これに対する答えを探してみましたが、あまり見つかりません。
どんな助けでも大歓迎です
FabricJS を見てください: http://fabricjs.com/と特に kitchensink のデモ: http://fabricjs.com/kitchensink/
必要なテキスト変更を行ってから、SVG にエクスポートできます。
HTML5 キャンバスの使用を検討することをお勧めします (サポートが必要なブラウザでサポートされている場合)。次に、次のようなライブラリを使用できるようになります: http://www.nihilogic.dk/labs/canvas2image/ドラッグ アンド ドロップについては、次のリンクを参照してください: http://html5.litten.com/how- to-drag-and-drop-on-an-html5-canvas/
クライアント ブラウザーをサポートするために jQuery を使用する必要がある場合、画像をキャプチャする簡単な方法はないと思います。ただし、Tシャツのテキストの座標、幅、フォント、フォントサイズ、およびフォントカラーをサーバーに送信し、そこで画像をレンダリングすることができます。その後、注文を確定する前に、確認ダイアログでクライアントのブラウザにこの写真を読み込むことができます。これが合理的で、サーバー環境にアクセスできる場合、どの言語でプログラミングしていますか? PHP? 他の？
また、サイトの所有者がサイトで作成された T シャツを実際にどのように作成するかを検討することもできます。最終的なバージョンがどのように見えるかの単なる写真とは対照的に、テキストの座標やフォントなど...がシャツを作るために必要なすべてである可能性があります.