私はA4サイズのドラッグを構築する過程にいるよとページビルダーをドロップします。 このビルダに含めることができる要素は、イメージとテキストボックスです。JavaScriptのドラッグアンドドロップページビルダー
私は、フロントエンド機能のこのタイプを構築するために使用することができる利用可能なフレームワーク上でいくつかのアドバイスを後にしています。私が後だ何の
例、私が試した2つのフレームワークは、これまでの私のニーズを満たす、または完全なページビルダーを作成することはかなり困難ななかったfabric jsとgreensock draggable、されているここでcanva.com
を参照してください。
理想的には私はこのためにキャンバスを使用したくありません。
編集： 基本機能：テキストボックス
回転のための便利なjQueryプラグインがあります。.. あなたのコードは：
<div id="product">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
これは動作するはずです。
さて、あなたの目標のほとんどはCSSで
http://www.html5rocks.com/en/tutorials/masking/adobe/
リサイズをマスキング2/3 +いくつかの純粋なJS
を追加10のクリッピング/達成することができ、変更フォントテキストボックスのスタイル/カラー/サイズ、背景に
純粋なJS/CSS2
回転
変換CSS3プロパティ
はかなり簡単に純粋なJSを使用して、行うことができますかあなたには、いくつかを試すことができますドラッグhttp://www.w3schools.com/cssref/css3_pr_transform.asp
オープンソースのプラグイン、またはjquery draggableのようなものです。あなたの現在のリストについては
、私は実際にそれのほとんどは少しの努力/グーグルとの純粋なJS/CSSによって達成することができるときには、このためのいくつかのフレームワークをしたいですか、なぜ、表示されません。
私の謙虚なフォービノンでは、jqueryやこれに類するものがすべてあなたが本当に必要なものです。 jqueryの「インタラクション」のセクション（https://jqueryui.com/draggable/）を確認して、ビルダーインタフェースの構築に役立つかどうかを確認してください。各インタラクションにはさまざまな例があります（右側のサイドバー）。
UPD： ここでは、（jquery UIを使用して）汚れたコードの例をhttp://jsfiddle.net/tbpxnxrm/2/としています。追加の要素を作成するには、
#mainをダブルクリックします。衝突は/実装チェックを重ね、UPD2 http://jsfiddle.net/4Vfm5/1095/drag_defaults = {grid: [50,50], containment: "parent"}; resize_defaults = { aspectRatio: true, handles: 'ne, se, sw, nw', grid: [50,50], minHeight: 50, minWidth: 50 } $('.draggable').draggable(drag_defaults); $('.resizable').resizable(resize_defaults);からフォークしない：数年後に私の例ではjsfiddle上ですべての動作を停止しました。理由を確かに伝えることはできませんが、主な答えはまだ信頼できます。
私の理解では、構成可能なダッシュボードを作成したいと考えています。
$(".set-as-droppable").droppable({
accept: "div.Dragable",
drop: function(event, ui) {
}
});
そして、ドラッグ可能コンポーネントとすることができる 私が使用して、各セルが独自のロジック記述
<table id="mainTable">
<tbody>
<tr>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
</tr>
<tr>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
<td class="set-as-droppable"></td>
</tr>
</tbody>
</table>
ドロップに続いて
などのようなdropable成分を持つべきでテーブル構造 Table merge and splitを示唆していますTEXTまたはIMAGEを使用して、任意の操作を行うことができます。私はあなたがこれを1つのフレームワークあなたの目標ができるだけ簡単にすることであるならば。
私がよく分かっているのは、あなたのアプリのユーザーがブラウザーに直接作成した何らかの高度な「描画」をさせることです。
最初に：キャンバス要素がなければ、その作品はサーバ側でエクスポート/生成する必要があります。
これを行う最も良い方法は、モデルが含まれ、位置、回転などの各プロパティが説明されている各ドキュメントとそのコンテンツを表すjavascriptオブジェクトを持つことです。そして、このオブジェクトは、CSSのプロパティとhtml要素をオブジェクト構造に対応させてレンダリングする必要があります。つまり、AngularJSは、自分のモデルをほぼ自動的に監視し、オブジェクトが変更されるとすぐにリアルタイムでターゲット要素をレンダリングするので、私の最初の選択となります。ここから（2角度より良いですが、唯一の活字とダートで文書化）
、HTML5 CSS3 &で、要素は素敵なプロパティを使用して操作することができます。を変換します。 "translateX（10px）"や "rotateZ（10deg）"のような値があります。 詳細については、http://www.w3schools.com/cssref/css3_pr_transform.aspをご覧ください。
また、ドラッグアンドドロップの場合：http://www.w3schools.com/html/html5_draganddrop.asp。
イメージをトリミングするには、サーバー側のコードを使用する必要があります。 （PHPでの例：http://php.net/manual/fr/function.imagecrop.php） http://api.jquery.com/category/ajax/： http://www.w3schools.com/cssref/pr_pos_clip.asp
、アプリとサーバ間の通信のためのjQueryの関数を使用し、
画像上のマスクで再生するには、うまく動作しCSS3プロパティもあります。
最後に、css3から希望するものを選択してください：http://www.w3schools.com/css/css3_intro.asp。 http://www.w3schools.com/css/css3_images.asp
私はあなたを助けてくれることを願っています。がんばろう ！
UPDATE：クリップのCSSプロパティが廃止されましたが、現在はクリップパスですが、ほぼ同じように動作します。
UPDATE 2：実際には、マスク（画像ではなくパス）は、マスクCSSプロパティ：https://developer.mozilla.org/en-US/docs/Web/CSS/maskで作成できます。ただし、まだ部分的にはサポートされていますのでご注意ください。http://caniuse.com/#search=mask
アリス、あなたは画面を認識しています<-> pdf変換フレームワークまたは少なくとも関連ルールセット？ - 私はそれがサーバー側のフレームワークであることを知っています<-> pdf。しかし、私はまだクライアント側でそれを管理する方法に苦しんでいます。（元のリクエスタではないにしても、彼女はその情報から利益を得ていると思います） – Quicker
見つけやすいので、私は研究の仕事をしています。http://stackoverflow.com/questions/ 19786113/export-html-page-to-pdf-on-user-click-using-javascriptコードで見られるように、彼はjsPDFを使っています：https://parall.ax/products/jspdf –
私はこれを私の自由な時間に実装しようとしましたが、数時間後に純粋なjsを使って地上から行うことはできません。これまでは、新しいDOM要素をページ領域にドロップするためのjQueryプラグインプロトタイプがあります。私はまた、ページ内の任意のブロックコンポーネントをサイズ変更可能にすることを実験してきました。数時間後に私はそれに入れました、私はいくつかの成功を収めました。
サイズ変更可能なブロック成分：（編集：辺の中央にある4つの小さなハンドルをドラッグ）メニューとドロップ可能エリアと
ページビルダープロトタイプ（テキストのみアイテムがドロップすることができます）。
私はそれに仕事を得る時はいつでも私はフィドルを更新し続けるだろうが、私はいつでもすぐに完成したプラグインを持っていません。
Too much code to put here! Visit the fiddle
html5 drag-n-drop apiを使用して独自のモジュールを作成できます。通常、このようなソリューションは、エンドユーザーが設定した仕様を満たすためにカスタム化されています。 stackoverflowの可能な解決策が必要な場合は、賞金を開始することができます。 – malinkody
@malinkodyコメントをいただきありがとうございます。まあ、私はjquery uiを調べることに戻りました。jqueryを使用して各ページ要素をjsonオブジェクトの配列に格納するコードが可能かもしれません。まだ早い時期。 – TheDeveloper
私の会社がPDFテンプレートインターフェイスの1つを再設計し始めているので、私は大きな関心事を持っています。要件をより正確に定義できれば、今後の週末の基本的な実装を開始できます。たとえば、イメージとテキストボックスだけが必要ですか？彼らは回転、サイズ変更、スケーリングなどが必要ですか？境界ボックスはどのようにすべきですか？ （ファブリックjsのように）どのように情報をエクスポートしたいですか？エクスポートされたテンプレートは標準に準拠する必要がありますか？レイヤーをサポートする必要がありますか？ （例えば画像プロセッサのように） – malinkody