Question

我正在创建一个类似钢琴卷的界面，就像你在DAW中找到的那样，就像你能够看到类似http://www.abletonlife.com/wp-content/uploads/2010/04/midi-track-big.jpg的东西。网格表示要在要播放的音符中绘制的画布，红色方块是要播放的音符。双击空白区域以创建新音符，您可以拖动边缘以更改音符的长度。

我是网络开发人员的新手，所以我在查看适合这种情况的架构方面遇到了一些麻烦。凭借我有限的知识，以下是我能想到的架构。

1）水平柔性盒的行。

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

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

优点：

调整浏览器窗口大小时，浏览器会自动发送处理音符的大小调整，从而处理网格。调整div /音符的大小也可以轻松处理，以便放大和缩小以及改变量化值。
所有位置的所有音符都已存在，当双击“创建”新音符时，您所要做的就是更改该音符的css（变为红色）等。

缺点：

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

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

优点：

只有实际音符的div，因此没有方法1）的con成为问题

缺点：

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

我确信我描述的两种方法有更多的架构和优点/缺点，但我从未创建任何Web应用程序，我的web-dev体验的范围是我已完成的教程过去两周自学。

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

Answer 1

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

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

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

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

KineticJS使用画布

有一些很酷的例子

Answer 2

我会使用背景图像来表示曲目和度量，并使用每个音符的一个div。没有必要将所有注释保留为浏览器中的div，只有最多10个度量的div才能更好地工作。

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

创建HTML5钢琴卷编辑器

2 个答案: