ALine画线、标注插件

演示1.简单演示

代码

var demo1 = new ALine('#demo1');
      demo1.init({color:'#666'}).angleLine(50,50,200,200).show();
        

演示2.各种类型的线

代码

var demo2 = new ALine('#demo2');
      //横线
      demo2.init({color:'#666'}).angleLine(50,150,100,150).show();
      //竖线
      demo2.init({color:'#777'}).angleLine(150,50,150,250).show();
      //直角
      demo2.init({color:'#888'}).angleLine(250,100,350,200).show();
      //曲线
      demo2.init({color:'#999'}).coolLine(400,100,500,200).show();
        

演示3.各种带头尾的线

代码

var demo3 = new ALine('#demo3');
      //横线
      demo3.init({color:'#666'}).angleLine(50,150,100,150).point().show();
      //竖线
      demo3.init({color:'#777'}).angleLine(150,50,150,250).point({width:8}).show();
      //直角
      demo3.init({color:'#888'}).angleLine(250,100,350,200).point({width:10}).show();
      //曲线
      demo3.init({color:'#999'}).coolLine(400,100,500,200).point({width:12}).show();
        

演示4.可以拖动的各种带头尾的线

代码

var demo4 = new ALine('#demo4');
      //横线
      demo4.init({color:'#666',canDrag:true}).angleLine(50,150,100,150).point().show();
      //竖线
      var demo4 = new ALine('#demo4');
      demo4.init({color:'#777',canDrag:true}).angleLine(150,50,150,250).point({width:8}).show();
      //直角
      var demo4 = new ALine('#demo4');
      demo4.init({color:'#888',canDrag:true}).angleLine(250,100,350,200).point({width:10}).show();
      //曲线
      var demo4 = new ALine('#demo4');
      demo4.init({color:'#999',canDrag:true}).coolLine(400,100,500,200).point({width:12}).show();
        

演示5.可以拖动的各种带头尾的线，带标签

代码

var demo5 = new ALine('#demo5');
      //横线
      demo5.init({color:'#666',canDrag:true}).angleLine(50,150,100,150).label("横线").point().show();
      //竖线
      var demo5 = new ALine('#demo5');
      demo5.init({color:'#777',canDrag:true}).angleLine(150,50,150,250).label("竖线").point({width:8}).show();
      //直角
      var demo5 = new ALine('#demo5');
      demo5.init({color:'#888',canDrag:true}).angleLine(250,100,350,200).label("直角").point({width:10}).show();
      //曲线
      var demo5 = new ALine('#demo5');
      demo5.init({color:'#999',canDrag:true}).coolLine(400,100,500,200).label("曲线").point({width:12}).show();
        

演示6.可以拖动的各种带头尾的线，带标签，带回调函数

代码

var demo6 = new ALine('#demo6');
      //横线
      demo6.init({color:'#666',canDrag:true,callback:function(){
            $("#demo6_memo1").html("当前创建的类为："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html()+" 绘制时间戳："+(new Date()).valueOf());
            },clickCallback:function(){
        $("#demo6_click").html("您点击了类："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html())
      }
      }).angleLine(50,150,100,150).label("横线").point().show();
      //竖线
      var demo6 = new ALine('#demo6');
      demo6.init({color:'#777',canDrag:true,callback:function(){
            $("#demo6_memo2").html("当前创建的类为："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html()+" 绘制时间戳："+(new Date()).valueOf());
            },clickCallback:function(){
        $("#demo6_click").html("您点击了类："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html())
      }}).angleLine(150,50,150,250).label("竖线").point({width:8}).show();
      //直角
      var demo6 = new ALine('#demo6');
      demo6.init({color:'#888',canDrag:true,callback:function(){
            $("#demo6_memo3").html("当前创建的类为："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html()+" 绘制时间戳："+(new Date()).valueOf());
            },clickCallback:function(){
        $("#demo6_click").html("您点击了类："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html())
      }}).angleLine(250,100,350,200).label("直角").point({width:10}).show();
      //曲线
      var demo6 = new ALine('#demo6');
      demo6.init({color:'#999',debug:true,canDrag:true,callback:function(){
            $("#demo6_memo4").html("当前创建的类为："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html()+" 绘制时间戳："+(new Date()).valueOf());
            },clickCallback:function(){
        $("#demo6_click").html("您点击了类："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html());
          var res = prompt("您打算修改标签"+arguments[0]+"为什么内容？",$("."+arguments[0]+".aline_label").html());
          demo6.setLabelTitle(arguments[0],res);
      }}).coolLine(400,100,500,200).label("点击我可以修改").point({width:12}).show();
        

演示7.多边形，可拖动

代码

var demo7 = new ALine('#demo7');
            demo7.init({canDrag:true}).polygon(4).point({bordercolor:" #333",border:2,bgcolor:"#41addd"}).show();