3

私はピアノロールのようなインターフェイスを作成しています。これは、ableton などの DAW に見られるようなもので、次のようになります http://www.abletonlife.com/wp-content/uploads/2010/04/midi-track-大きい.jpg . グリッドは、再生するノートを描画するキャンバスを表し、赤い四角が再生するノートです。空のスペースをダブルクリックして新しいメモを作成し、エッジをドラッグしてメモの長さを変更できます。

私はウェブ開発に不慣れなので、これに適したアーキテクチャが何であるかを確認するのに少し苦労しています。私の限られた知識では、次のアーキテクチャが考えられます。

1) 水平フレックスボックスの行。

display: box;
box-orient: horizontal;
box-flex: 1;

http://jsfiddle.net/ZgzNw/のようなもの。

長所：

  • ブラウザー ウィンドウのサイズを変更すると、ブラウザーは自動的
    にノートのサイズ変更を処理し、グリッドのサイズ変更を処理します。div/note のサイズ変更も、ズームインとズームアウト、および量子化値の変更のために簡単に処理されます。

  • すべての位置のすべてのメモは既に存在します。ダブルクリックして新しいメモを「作成」する場合、そのメモの css を変更するだけです (赤色にする) など。

短所：

  • グリッド内のすべてのスペースに div があるため、再生するノートがない空のスペースでも、多数の div が存在します。ブラウザーは何千もの div を処理できますか? 極端な例として、32 分音符のクオンタイズがある場合、200BPM の曲は 1 分間に 50 小節、10 分の曲で 500 小節になります。上記の jsfiddle の例に戻り、measures=500 および quant=32 を設定すると、数秒後に Chrome 開発者ツール コンソールに次のエラーが表示されます。「Uncaught RangeError: Maximum call stack size exceeded」. これは、JavaScript のそのビットで div を作成するときです。数を約 300 に下げると、div を作成できますが、遅延が発生します。

2) グリッドの垂直線に width=1px の div を使用してグリッドを作成します。その場で新しいノート div を作成し、マウス クリックの位置に基づいて (position: float? で) 手動で配置します。

長所：

  • オンになっている実際のメモのdivのみがあるため、方法1のconが問題になることはありません

短所：

  • すべてを手動で計算する必要があります。新しく作成されたメモを配置する場所、ズームイン/アウトは、グリッドの垂直マーカーの位置を変更し、メモ div の新しいサイズを計算することを意味します。これは、方法 1 でほとんど自動的に処理されました。

私が説明する 2 つの方法には、さらに多くのアーキテクチャと長所/短所があると確信していますが、私は Web アプリケーションを作成したことがなく、Web 開発の経験の範囲は、過去 2 年間で行ったチュートリアルです。自分自身を教えるために数週間。

私の質問は、私が説明しているこのピアノロール インターフェイスを作成するための最適なアーキテクチャは何かということです。具体的には、バッキング モデルではなく、UI 表現です。

4

2 に答える 2

2

スコアの表現を含む単純なモデル (おそらく単なる多次元配列) を作成します。各配列項目は、ある時点での音符を表します。モデルから、それに応じて描画/再描画できます。配列を変更することで、時間シフト、量子化、間引きなどの操作を実行することもできます。

ブラウザーは何千もの div を処理できますか?

数千、はい、それ以上かもしれませんが、それ以上かもしれませんが、結果はブラウザーやコンピューターによって大きく異なります。ブラウザにはもっと計算する必要があります)。

代わりに、キャンバスを使用して調査し、基礎となるモデルに基づいて描画/再描画します。キャンバス全体でイベントを検出でき、座標に応じて、対応するノートにイベントを簡単にマッピングできます。

KineticJSには、キャンバスを使用したいくつかのクールな例があります

于 2012-11-27T01:46:39.570 に答える
1

背景画像を使用してトラックと小節を表し、ノートごとに 1 つの div を使用します。ブラウザーですべてのメモを div として保持する必要はありません。最大 10 個の小節を表示するための div のみを保持する方が適切です。

Imho、これは固定幅で行う必要があり、ピアノロールのサイズ変更はまったく行わないでください。したがって、ピクセルの計算を使用できます。これは、Javascript を多用しないとうまくいかないと思います。

于 2012-11-27T08:29:15.067 に答える