niantang-ALine
/
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ALine 演示</title>
  <style>
    body{
      padding: 0;margin: 0;}
    h3{margin: 0;padding: 0;background: #efefef;line-height: 60px;height: 60px;color: #666;font-size: 22px;text-indent: 20px;}
    dl{margin:10px 20px;}
    dl dt{line-height: 40px;font-family:"微软雅黑";}
    dl dd h5{font-weight: 600;font-size:14px;}
    dl dd pre{background: #ddd;padding: 5px;border-radius: 10px;}
    ul{margin-left: 0;}
    ul li{list-style: none;line-height: 3;}
    .demo{width:100%;height:300px;background-color:#efefef;position:relative;min-width:500px;}
  </style>
  <script src="src/jquery.min.js" type="text/javascript"></script>
  <script src="src/ALine.js" type="text/javascript"></script>
</head>
<body>
<h3>ALine画线、标注插件</h3>

<dl>
  <dt>
    演示1.简单演示
  </dt>
  <dd>
    <div id="demo1" class="demo"></div>
    <script type="text/javascript">
      var demo1 = new ALine('#demo1');
      demo1.init({color:'#666'}).angleLine(50,50,200,200).show();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
var demo1 = new ALine('#demo1');
      demo1.init({color:'#666'}).angleLine(50,50,200,200).show();
        </pre>
  </dd>
</dl>


<dl>
  <dt>
    演示2.各种类型的线
  </dt>
  <dd>
    <div id="demo2" class="demo"></div>
    <script type="text/javascript">
      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();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
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();
        </pre>
  </dd>
</dl>

<dl>
  <dt>
    演示3.各种带头尾的线
  </dt>
  <dd>
    <div id="demo3" class="demo"></div>
    <script type="text/javascript">
      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();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
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();
        </pre>
  </dd>
</dl>

<dl>
  <dt>
    演示4.可以拖动的各种带头尾的线
  </dt>
  <dd>
    <div id="demo4" class="demo"></div>
    <script type="text/javascript">
      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();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
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();
        </pre>
  </dd>
</dl>


<dl>
  <dt>
    演示5.可以拖动的各种带头尾的线，带标签
  </dt>
  <dd>
    <div id="demo5" class="demo"></div>
    <script type="text/javascript">
      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();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
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();
        </pre>
  </dd>
</dl>


<dl>
  <dt>
    演示6.可以拖动的各种带头尾的线，带标签，带回调函数
  </dt>
  <dd>
    <div id="demo6" class="demo"></div>
    <div id="demo6_memo1"></div>
    <div id="demo6_memo2"></div>
    <div id="demo6_memo3"></div>
    <div id="demo6_memo4"></div>
    <div id="demo6_click"></div>
    <script type="text/javascript">
      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 demo7 = new ALine('#demo6');
      demo7.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());
          if(!res){
              res = $("."+arguments[0]+".aline_label").html();
          }
          demo7.setLabelTitle(arguments[0],res);
      }}).coolLine(400,100,500,200).label("点击我可以修改").point({width:12}).show();
      var demo8 = new ALine('body');

      demo8.init({color:'#999',debug:true,canDrag:true,clickCallback:function(){
          alert("你点击了我,我想说的是，这个可以实现很多标注的功能")
      }}).coolLine(246,26,581,92).label("你看，这是我标注的标题").point({width:10}).show();

      var demo8 = new ALine('#demo6');
      demo8.init({color:'#999',debug:true,labelOverStep:false,canDrag:true,callback:function(){
      $("#demo6_memo4").html("当前创建的类为："+arguments[0]+" , 标签文字为："+$("."+arguments[0]+".aline_label").html()+" 绘制时间戳："+(new Date()).valueOf());
      }}).coolLine(600,100,800,200).label("标签不能拖出去").point({width:12}).show();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
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();
        </pre>
  </dd>
</dl>
<dl>
    <dt>
        演示7.多边形，可拖动
    </dt>
    <dd>
        <div id="demo7" class="demo"></div>
        <script type="text/javascript">
            var demo7 = new ALine('#demo7');
            demo7.init({canDrag:true,callback:function(){
            console.info(arguments[1]);
            }}).polygon([[200,14],[400,250],[100,200]]).point({bordercolor:" #333",border:2,bgcolor:"#41addd"}).show();
            var demo7 = new ALine('#demo7');
            demo7.init({canDrag:true,callback:function(){
                console.info(arguments[1]);
            }}).polygon(7).point({bordercolor:" #333",border:2,bgcolor:"#41addd"}).show();
        </script>
    </dd>
    <dd>
        <h5>代码</h5>
        <pre>
var demo7 = new ALine('#demo7');
            demo7.init({canDrag:true}).polygon(4).point({bordercolor:" #333",border:2,bgcolor:"#41addd"}).show();
        </pre>
    </dd>
</dl>

</body>
</html>