SVGでの描画
HTMLにVexTabで楽譜を表示するには、SVGを使う方法とHTML5のcanvasを使う方法があります。ここではSVGを使う方法について説明します。
headタグ内の設定
楽譜データ領域の設定
class属性
scale属性 楽譜の表示倍率
editor, editor_width, editor_height属性 コードウィンドウの表示/非表示とサイズ設定
SVGを使うには、HTMLの冒頭のheadタグ内でVEXTAB_USE_SVGをtrueに設定してからvextab-div.jsを読み込みます。
headタグ内に追加するコード<script> VEXTAB_USE_SVG = true </script> <script src="vextab-div.js"></script> <!-- 設置場所のパスに合わせる -->
SVGを使う場合、楽譜データは次のようにdivタグ内に記述します。次のHTMLコードは、楽譜データの例です。
<div class="vex-tabdiv" width=680 scale=1.0 editor="true" editor_width=680 editor_height=100> options space=20 tabstave notation=true notes 4-5-6/3 10/4 </div> </body> </html>
divの開始タグでは、SVGを使うためのいくつかの属性の設定が必要となります。
| class属性 | "vex-tabdiv" |
| scale属性 | 楽譜の表示倍率 |
| editor属性 | コードウィンドウの表示/非表示 |
| editor_width属性 | コードウィンドウの幅 |
| editor_height属性 | コードウィンドウの高さ |
楽譜データを格納するdivタグのclass属性は必ず"vex-tabdiv"に設定しておく必要があります。
<div class="vex-tabdiv" width=680 scale=1.0 editor="true"
editor_width=680 editor_height=100>
scale属性を使えば、楽譜の表示倍率を設定することができます。10進小数点数で指定し、1.0が標準倍率となります。このscale値は絶対値ではなく、divタグのwidth属性に対する相対値となります。
<div class="vex-tabdiv" width=680 scale=1.0 editor="false"
editor_width=680 editor_height=100>
width=100 scale=0.5
options space=0
tabstave notation=true tablature=false
notes 4-5-6/3 10/4
width=200 scale=0.5
options space=0
tabstave notation=true tablature=false
notes 4-5-6/3 10/4
width=200 scale=1.0
options space=0
tabstave notation=true tablature=false
notes 4-5-6/3 10/4
width=200 scale=2.0
options space=0
tabstave notation=true tablature=false
notes 4-5-6/3 10/4
editor属性は楽譜の下のコードウィンドウの表示/非表示の設定を行います。trueの時コードウィンドウが表示され、falseの時に非表示となります。コードウィンドウの幅と高さはeditor_width属性とeditor_height属性を使って設定します。コードウィンドウ内のコード（楽譜データ）は編集することができます。結果はリアルタイムに楽譜表示に反映されます。
<div class="vex-tabdiv" width=680 scale=1.0 editor="true"
editor_width=680 editor_height=100>
editor="true" editor_width=300 editor_height=100
options space=0
tabstave notation=true tablature=false
notes 4-5-6/3 10/4
