0

私は現在、ユーザーが要素をページにドラッグアンドドロップしたり、要素のサイズを変更したり、色を変更したりできるように、Webサイトビルダーを作成しています。

イベントをドラッグできるようにHTML5キャンバスを介して実行できるかどうか疑問に思っています。ユーザーがキャンバス内のこのビューに満足したら、このキャンバスの描画をHTMLとCSSに変換できます。これは可能ですか?

もしそうなら、どのように?そして、誰かが私にこれの例を指摘できますか?または他のより良い方法はありますか?

4

2 に答える 2

3

一般に、ワイヤーフレームなどでこれを行うアプリを見つけた場合、それらは非常に使いやすいHTMLを生成しません。ただし、正確な意図はわかりません。

1 Canvasの使用:

キャンバスに描画した要素にイベントを追加したり、要素のサイズを変更したり、要素を移動したりするには、 http: //www.kineticjs.com/を参照してください。キャンバスをhtmlに変換するのは簡単な作業ではありませんが、実際には、私が想定しているポイント2にたどり着くでしょう。

2プレーンなhtml/css / jsを使用する:

すべての要素に絶対位置を追加します。これにより、すべてをドラッグできます。z-indexを指定して、別の要素の上に表示するか下に表示するかを指定できます。現在のソースをコピーするだけなので、HTMLを非常に簡単にコピーできます。ただし、これが適切なhtmlを生成する方法として使用され、ワイヤーフレーム/モックアップとしてだけでなく、誰かが実際にサイトで使用することになっている場合、このアプローチは適切ではありません。

デザイナーを純粋に使用して、保守可能できれいなHTMLを作成できる場合は想像できません。

于 2012-08-21T21:47:56.410 に答える
2

私のプロジェクトhttp://canvimation.github.com/は、あなたがやりたいことをするために何らかの方法で進んでいます。

私のプロジェクトのソースコードはhttps://github.com/canvimation/canvimation.github.comにあります

マスターブランチは現在機能しているコードです。私は現在、コードをより理解しやすくし、いくつかの要素をデバッグし、アニメーションの構築を容易にするために、プロジェクトの書き直しを行っています。新しい開発はstage1ブランチにありますが、まだオンラインで実行できません。実行するにはコードをコピーする必要があります。コードを使用するか、プロジェクトをフォークすることができます。

于 2012-08-22T08:02:23.257 に答える