javascript - 创建 HTML5 钢琴卷帘编辑器

Question

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center为指导。




8 年前关闭。




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

我是 Web 开发的新手，所以我在了解适合的架构可能是什么时遇到了一些麻烦。以我有限的知识，以下是我能想到的架构。

1) 多排水平的 flex-boxes。

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 开发人员工具控制台中收到以下错误“Uncaught RangeError: Maximum call stack size exceeded”。这是在 javascript 中创建 div 时，如果我将数字降低到 300 左右，它就可以创建 div，但事情会变得滞后。

2) 使用宽度为 1px 的 div 为网格的垂直线创建网格。动态创建新的音符 div，根据鼠标单击的位置手动定位它们(​​使用 position: float?)。

优点:

只有一个用于实际注释的 div，所以没有方法 1) 的问题

缺点:

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

我确信我描述的两种方法有更多的架构和优缺点，但我从未创建过任何 Web 应用程序，而且我的 Web 开发经验的范围是我在过去 2 年中完成的教程周自学。

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

Answer 1

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

Can the browser handle thousands of divs?

几千，是的，也许更多——甚至可能更多——但结果会因浏览器、计算机，甚至它们的定位方式而有很大差异(例如， float 往往比绝对定位慢，因为浏览器有更多的计算)。

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

KineticJS有一些使用 Canvas 的很酷的例子