JavaScript クリックして直線を描く

画像の上を２回クリックすると直線を引くことができるサンプルです。

ユーザーに画像か何かの要素の上で、直線を引かせたいときがあるとします。（稀ですが）

開始の点と終了の点をクリックすると、要素の上に直線が現れます。

以下の画像を２回クリックしてみてください。

始点座標
終点座標

要素を２回クリックするとき、１回目と２回目で違う動きになるよう分岐しています。

クリックごとに点となる要素を配置し、２回目のクリックの時に要素同士の位置を使ってSVGで線を配置しています。

以下がこのJSです



var btn_sw=1;

$("#demo_stage").on("click",function(e){
    if(btn_sw==1){
        x = e.offsetX;
        y = e.offsetY;
        $("#demo_txt1").remove();
        $("#demo_txt2").remove();
        $("#demo_svg").remove();

        $("#demo_stage").append('<div id="demo_txt1" style="left:'+x+'px;top:'+y+'px;">start</div>');
        $("#demo_start_xy").html('x:'+x+' y:'+y+'');
        btn_sw=2;

    }else if(btn_sw==2){
        x = e.offsetX;
        y = e.offsetY;
        $("#demo_txt2").remove();
        $("#demo_stage").append('<div id="demo_txt2" style="left:'+x+'px;top:'+y+'px;">end</div>');	

        p1 = $("#demo_txt1").position();
        p2 = $("#demo_txt2").position();

        x1 = p1.left;
        y1 = p1.top;
        x2 = p2.left;
        y2 = p2.top;

        $("#demo_svg").remove();
        
        $("#demo_stage").append('<svg width="600" height="400" id="demo_svg"><line x1="'+x1+'" y1="'+y1+'" x2='+x2+' y2='+y2+' stroke="#000" stroke-width="5px"/></svg>');
        $("#demo_end_xy").html('x:'+x+' y:'+y+'');
        btn_sw=1;

    }
	
});