Question

有一个想法是创建一个在线音乐理论测验。我在Inkscape中创建了一个绘图并以svg格式保存。该文件用作外部源，并已添加到HTML代码中。

我遇到的挑战如下：

1）如何激活（选择）高音人员以下的线路？

2）如何将音符（A，B，C，D，E，F，G）的名称放入带下划线的空格中？

3）如何用相同的字母命名重复的音符（例如＆＃34; F＆＃34;在我的样本中重复2次）？

<!DOCTYPE html>
<html>
<body>

<img src="image_library/grandstaff_drawing.svg" />

</body>
</html>

4）我已将svg转换为png以显示测验草稿。

Answer 1

这实际上涉及相当复杂的javascripting :-)以你的方式，你必须做大致如下：

将SVG下载为＆＃34; text＆＃34; （或者更确切地说是XML），通过XHR（例如$.get(image_library/grandstaff_drawing.svg)）
解析下载的数据并在文档中创建<svg>元素（而不是<img>
查找所有注释并确定其位置（在y轴上）并从中确定其名称
为带下划线的空格

可能更简单的方法是在浏览器中创建五线谱，并将键的图形和注释仅作为组件。然后，如果您要创建例如＆＃34; CDE＆＃34;注意顺序，您将手动定位笔记组件。您必须确定每个音符的y轴偏移（例如，对于C，顶部为60px，D为55px，E为50px，假设线高度为10px），但它比确定更容易来自Inkscape SVG的相同内容。您必须更多地了解SVG的工作原理，但无论如何您迟早都需要:-)所以步骤如下：

在浏览器中创建一个数组，指明要显示的序列（['C', 'D', 'E']）
为stave创建一个<svg>元素，并通过遍历notes数组将所有注释插入其中（您可能希望使用某些SVG框架，如Raphael或D3）
再次通过遍历数组创建带下划线的空格区域所需的编程

这种方法的优势在于您可以在JavaScript变量中使用序列，并且您可以构建两者 stave和带下划线的空格，可以更容易地确定用户是否正确匹配了笔记。从第一种方法重建SVG中的相同变量将会非常混乱并且容易出错（因为即使两个Inkscape SVG之间的微小差异也会使您的编程陷入困境，您也必须满足它的需求）。

我说这是非常广泛的问题，它基本上是如何编写此应用程序。 JavaScript没有函数determineSequenceFromSvgStove或createBlankAreasWithFollowingCorrectAnswers尝试上述方法之一，如果您遇到如何实施某些步骤的问题，请询问它们。

在JavaScript中创建和操作带下划线的对象

1 个答案: