创建 demo.html,demo.html

sbfdjhk

于 2021-07-01 22:55:37 发布

阅读量1.1k

点赞数

文章标签：创建 demo.html

ALine 演示

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;}

ALine画线、标注插件

演示1.简单演示

var demo1 = new ALine('#demo1');

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

代码

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();

代码

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();

代码

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();

代码

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();

代码

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 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();

代码

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,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();

代码

var demo7 = new ALine('#demo7');

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

一键复制

编辑

Web IDE

原始数据

按行查看

历史

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。