3

我正在创建一个类似钢琴卷的界面，就像你可能在诸如ableton之类的DAW中找到的界面，看起来像这样http://www.abletonlife.com/wp-content/uploads/2010/04/midi-track-大.jpg 网格代表一个画布，用于绘制要播放的音符，红色方块是要播放的音符。您可以双击空白区域以创建新注释，并且可以拖动边缘以更改注释的长度。

我是 Web 开发的新手，所以我很难看到正确的架构可能是什么。以我有限的知识，以下是我能想到的架构。

1) 水平弹性盒的行。

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

像这样的东西，http://jsfiddle.net/ZgzNw/。

优点：

  • 调整浏览器窗口大小时，浏览器将自动
    处理注释大小的调整，从而调整网格大小。调整 divs/notes 的大小也很容易处理，以放大和缩小和更改量化值。

  • 所有位置的所有笔记都已经存在，当双击“创建”一个新笔记时，您所要做的就是更改该笔记的 css（变为红色）等。

缺点：

  • 由于网格中的每个空间都有一个 div，即使是没有音符要播放的空白空间，也会有很多 div。浏览器可以处理数千个 div 吗？举个极端的例子，如果有 32 分音符量化，一首 200BPM 的歌曲每分钟有 50 小节，如果一首 10 分钟的歌曲，那就是 500 小节。回到上面的 jsfiddle 示例并设置 measure=500 和 quant=32，几秒钟后我在 Chrome 开发人员工具控制台中收到以下错误“未捕获 RangeError：超出最大调用堆栈大小”。这是在那个 javascript 中创建 div 时，如果我将数字降低到 300 左右，它可以创建 div，但是事情变得滞后。

2) 为网格的垂直线使用宽度=1px 的 div 创建网格。动态创建新的笔记 div，根据鼠标单击的位置手动定位它们（​​使用位置：浮动？）。

优点：

  • 只有一个用于实际注释的 div，所以不要让方法 1) 的缺点成为问题

缺点：

  • 必须手动计算所有内容，在哪里放置新创建的笔记，放大/缩小意味着重新定位网格的垂直标记，以及计算笔记 div 的新大小。这主要是在方法 1 中自动处理的。

我确信我描述的两种方法有更多的架构和优点/缺点，但我从未创建过任何 Web 应用程序，我的 Web 开发经验的程度是我在过去 2 中完成的教程几个星期来自学。

我想我的问题是创建我所描述的这个钢琴卷界面的最佳架构是什么？特别是 UI 表示，而不是支持模型。

4

2 回答 2

2

我会创建一个简单的模型（可能只是一个多维数组）来包含分数的表示，其中每个数组项代表一个时间点的一个音符。然后，您可以从模型中相应地绘制/重绘。您还可以通过修改数组来执行时移、量化、细化等操作。

浏览器可以处理数千个 div 吗？

几千，是的，也许更多——甚至更多——但结果会因浏览器、计算机甚至定位方式而有很大差异（例如，浮点数往往比绝对定位慢，因为浏览器有更多的计算）。

相反，我会使用画布进行研究，并根据您的基础模型进行绘制/重绘。您可以检测整个画布上的事件，并根据坐标轻松将事件映射到它对应的注释。

KineticJS有一些很酷的使用画布的例子

于 2012-11-27T01:46:39.570 回答
1

我会使用背景图像来表示音轨和小节，并为每个音符使用一个 div。没有必要在浏览器中将所有笔记都保存为 div，最好只将 div 用于可见的最多 10 个度量。

恕我直言，这应该是固定宽度的，根本不应该调整钢琴卷的大小。所以你可以使用像素计算。如果不大量使用 Javascript，我认为这不会起作用。

于 2012-11-27T08:29:15.067 回答