私は現在、ユーザーが要素をページにドラッグアンドドロップしたり、要素のサイズを変更したり、色を変更したりできるように、Webサイトビルダーを作成しています。
イベントをドラッグできるようにHTML5キャンバスを介して実行できるかどうか疑問に思っています。ユーザーがキャンバス内のこのビューに満足したら、このキャンバスの描画をHTMLとCSSに変換できます。これは可能ですか?
もしそうなら、どのように?そして、誰かが私にこれの例を指摘できますか?または他のより良い方法はありますか?
私は現在、ユーザーが要素をページにドラッグアンドドロップしたり、要素のサイズを変更したり、色を変更したりできるように、Webサイトビルダーを作成しています。
イベントをドラッグできるようにHTML5キャンバスを介して実行できるかどうか疑問に思っています。ユーザーがキャンバス内のこのビューに満足したら、このキャンバスの描画をHTMLとCSSに変換できます。これは可能ですか?
もしそうなら、どのように?そして、誰かが私にこれの例を指摘できますか?または他のより良い方法はありますか?
一般に、ワイヤーフレームなどでこれを行うアプリを見つけた場合、それらは非常に使いやすいHTMLを生成しません。ただし、正確な意図はわかりません。
キャンバスに描画した要素にイベントを追加したり、要素のサイズを変更したり、要素を移動したりするには、 http: //www.kineticjs.com/を参照してください。キャンバスをhtmlに変換するのは簡単な作業ではありませんが、実際には、私が想定しているポイント2にたどり着くでしょう。
すべての要素に絶対位置を追加します。これにより、すべてをドラッグできます。z-indexを指定して、別の要素の上に表示するか下に表示するかを指定できます。現在のソースをコピーするだけなので、HTMLを非常に簡単にコピーできます。ただし、これが適切なhtmlを生成する方法として使用され、ワイヤーフレーム/モックアップとしてだけでなく、誰かが実際にサイトで使用することになっている場合、このアプローチは適切ではありません。
デザイナーを純粋に使用して、保守可能できれいなHTMLを作成できる場合は想像できません。
私のプロジェクトhttp://canvimation.github.com/は、あなたがやりたいことをするために何らかの方法で進んでいます。
私のプロジェクトのソースコードはhttps://github.com/canvimation/canvimation.github.comにあります
マスターブランチは現在機能しているコードです。私は現在、コードをより理解しやすくし、いくつかの要素をデバッグし、アニメーションの構築を容易にするために、プロジェクトの書き直しを行っています。新しい開発はstage1ブランチにありますが、まだオンラインで実行できません。実行するにはコードをコピーする必要があります。コードを使用するか、プロジェクトをフォークすることができます。