创建一个 HTML5 钢琴卷帘编辑器 [关闭]答案

【问题标题】：creating an HTML5 piano roll editor [closed]创建一个 HTML5 钢琴卷帘编辑器 [关闭]
【发布时间】：2012-11-14 14:19:28
【问题描述】：

我正在创建一个类似钢琴卷的界面，就像您可能在 Ableton 这样的 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/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 开发经验的范围是我已经完成的教程最后两周自学。

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

【问题讨论】：

这听起来像是你实际上最好使用canvas 的东西。即时计算是唯一可行的方法。 “浏览器可以处理数千个 div 吗？”是的，但它不会对此感到高兴，每个<div> 都存储了大量信息，在计算和渲染页面时会占用大量内存，然后占用 CPU。
就我个人而言，我不会使用第一个示例。由于经常使用音乐软件和钢琴卷（主要是 Ableton Live 和 Maschine），当我调整窗口大小时，我希望在视口中看到更长的部分。因此，假设我在 400 像素的浏览器宽度上看到四个条，我希望在 500 像素上看到 5 个条。所以我会把缩放功能（水平和垂直）分开而不是相对于视口大小。
@insertusernamehere，实际上在 Ableton Live 中，您在调整窗口大小时会看到固定数量的条/时间，您必须放大/缩小才能看到更多时间/条。无论如何，调整窗口大小时的任一功能都可以使用第一种方法实现，我对高级架构的优缺点更感兴趣。
其实我就是这么说的。 :)

标签： javascript html css web-applications

【解决方案1】：

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

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

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

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

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

【讨论】：

我一直认为画布是用于更专业的 UI。我的布局相对简单，一堆可调整大小/可移动的矩形。你能帮我更好地理解在这种情况下使用画布比仅定位的 div 有什么优势吗？以我有限的知识，我只能看到在这种情况下使用画布的缺点：必须手动处理基于鼠标位置的映射点击/事件，而不是仅将 onclick 处理程序附加到 div，轻松调整 div 的大小（jquery-ui 可调整大小）。放大/缩小时，似乎两者都需要计算新的大小（与方法 1 相比）。
这是一个有效的观点，尽管我认为这是一个有点专业的 UI。性能是手工绘图的有力论据。灵活性是另一回事。你可以在画布上画出你想要的任何东西；虽然 HTML 元素（如 DIV）有很多选项，但仍然存在限制。
如果你想走元素路线（DIV），我仍然肯定会创建一个简单的模型来表示数据。也许您一次只能绘制模型的一部分（并删除隐藏节点），这将使性能可以接受。

【解决方案2】：

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

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

【讨论】：