line と polyline と shape:path による線の描画

VML

フリーハンドツールを作ってるんだけど、線を描画するAPIは3つあり、どれを利用するのが一番いいか調査した。

  • line を利用する
    一番簡単なんだけど、レスポンスが超悪すぎ。フリーハンドツールとしては利用できない
var div_tag = document.getElementById("pointer"); // <div id="pointer"> というタグを作っておく
div_tag.innerHTML += '<v:line style="behavior: url(#default#VML);position:absolute" from="'
                   + prev_x + ',' + prev_y + '" to="'
                   + now_x + ',' + now_y + '" strokecolor="black" />';
  • polyline を利用する
    わりと簡単なんだけど、IEのバグで、画面がビヨーンビヨーンと伸び縮みする時がある
<v:polyline id="l" style="behavior: url(#default#VML);position:absolute;"
            points="0,0" filled="false" strokecolor="black" />

というタグを用意しておいて

var div_tag = document.getElementById("l");
div_tag.points.value += " " + x + "," + y;
  • shape:pathを利用する
    めんどくさいけど、これを利用すべし
<v:shape id="1" filled="false" strokecolor="#000" strokeweight="3px"
    style="behavior:url(#default#VML);visibility:visible;position:absolute;left:0;top:0;width:100;height:100;antialias:false;"
    coordsize="100,100" coordorigin="0, 0" >
  <v:path id="line_path" style="behavior:url(#default#VML);position:absolute" />
</v:shape>

というタグを用意しておいて

var V_PATH_STR_BEG = "m 0,0 l 0,0";
var V_PATH_STR_END = " x e";
var g_position_str = "";
var div_tag = document.getElementById("line_path");
g_position_str += "," + x + "," + y;
div_tag.v = V_PATH_STR_BEG + g_position_str + V_PATH_STR_END;