用raphael绘制吉他谱

最近试着修改了一个用Raphael绘制的吉他谱的网页。Raphael是一个可以在网页上绘制矢量图的JavaScript库,它使用SVGW3C推荐和VML作为绘制图形的标准,也就是说其绘制的图形可以作为DOM节点。是一个非常方便的库,运用它可以绘制各种图表,各种几何图形,还可以进行图形的裁剪和旋转等操作。

现在在网上常常看到有人在那问吉他谱。网上一大堆可以搜吉他谱的网站,可是大多是有广告、论坛需要注册什么的,非常不方便。给出的吉他谱大多是图片,各种各样格式的,还各种各样的标记,没有个标准。现在在吉他软件行业的大佬Guitar pro功能很强大,但给人以不开放的感觉。很多东西都收费,不能大众化。现在似乎迫切需要一个软件或网站,大家能通过它进行分享曲谱的,可目前似乎没有看到。

要想是想分享曲谱,当然是用户可以自己制作曲谱。这个小软件目前还没有完善好。只是知道了怎么在网页上,给定一些数据,将数据画出一个吉他谱来,这部分功能现在也只是初步。

我稍微改了下它。

  • 将传统的竖版的和弦图改成横版的。为什么?

这可能跟最初画这些图的人的设计有关。和弦图竖直,六线谱横版,这两个有些不和谐。可能这对于熟悉的人没什么,但对于初学者以及人的直觉,这样的方式显然不如这两者都是横版来得直观。

  • 将传统的和弦图上o是空弦、x是不触碰,改成了现在的形式。为什么?

现在只管看哪些弦是不触碰的,这样需要关注的东西减少了。并且我们将不能触碰的弦改成红色虚线状,这样就更简洁直观了。刚开始仅仅是用红线,后来想到了,用户可能要打印黑白文件,看不到颜色,故用虚线表示。

  • 把位符号用一个矩形和数字来表示,并配上颜色标示,这样显然要比传统的直观。

想看DEMO的点这里

本文章必富客制作,转载请注明出处