只是初步demo，仅供学习，事件机制可以自己研究加入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>line</title>
<meta name="description" content="" />
<meta name="author" content="Administrator" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="CSS/line.css" />
<!--[if IE]><script type="text/javascript" src="JS/excanvas.js"></script><![endif]-->
<script src="JS/jquery-1.8.2.js"></script>
</head>
<body>
<div style="float: left;width: 1px;">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</div>
<div id="left">
<ul>
<li>节点一</li>
<li>节点一</li>
</ul>
</div>
<div id="right">
<ul>
<li>节点二</li>
<li>节点二</li>
</ul>
</div>
<script src="JS/jquery.line.js"></script>
</body>
</html>
js
/**
* @author wsf
*/
(function(win,$) {
var jl = {};
win.jl = jl;
//默认属性
var _defaults = {
cwidth : 400,
cheight : 300,
ctx:null,
everything : [],
curwall:null,
wallwidth : 5,
wallstyle : "lightblue",
walls : [],
inmotion : false,
unit : 10
};
/**
* 开始画画
*/
jl.startWall = function(e) {
var mx = e.pageX-this.offsetLeft,my = e.pageY-this.offsetTop;
var opts = jl.options;
opts.curwall = new jl.wall(mx, my, mx + 1, my + 1, opts.wallwidth, opts.wallstyle);
opts.inmotion = true;
opts.everything.push(opts.curwall);
jl.drawall();
};
/**
* 画画
*/
jl.stretchwall = function(e) {
var opts = jl.options;
if (opts.inmotion) {
var mx = e.pageX-this.offsetLeft,my = e.pageY-this.offsetTop;
var my;
opts.curwall.fx = mx;
opts.curwall.fy = my;
jl.drawall();
}
}
/**
* 结束画画
*/
jl.finish = function(e) {
var opts = jl.options;
opts.inmotion = false;
opts.walls.push(opts.curwall);
}
/**
* 画的样式
*/
jl.wall = function(sx, sy, fx, fy, width, stylestring){
this.sx = sx;
this.sy = sy;
this.fx = fx;
this.fy = fy;
this.width = width;
this.draw = jl.drawAline;
this.strokestyle = stylestring;
}
/**
* 不止画线，还可以扩展
*/
jl.drawall = function(){
var opts = jl.options;
opts.ctx.clearRect(0, 0, opts.cwidth, opts.cheight);
var i;
for (i = 0; i < opts.everything.length; i++) {
opts.everything[i].draw();
}
}
/**
* 画线
*/
jl.drawAline = function(){
var ctx = jl.options.ctx;
ctx.lineWidth = this.width;
ctx.strokeStyle = this.strokestyle;
ctx.beginPath();
ctx.moveTo(this.sx, this.sy);
ctx.lineTo(this.fx, this.fy);
ctx.stroke();
}
/**
* 初始化
*/
jl.init=function(settings) {
jl.options = $.extend({},_defaults,settings);//加入自定义属性
var srcEle = $(settings.canvasId);//element
jl.options.ctx = srcEle[0].getContext('2d');
var _method = {
'mousedown':jl.startWall,
'mousemove':jl.stretchwall,
'mouseup':jl.finish
}
for(var ename in _method){
srcEle.bind(ename,_method[ename]);
}
jl.drawall();
};
jl.init({"canvasId":"canvas"});
})(window,jQuery);
css
#canvas{
background-color: #fff;
}
#left{
border:4px solid #ccc;
border-right:none;
height: 300px;
width:200px;
float: left;
}
#right{
border:4px solid #ccc;
border-left:none;
height: 300px;
width: 200px;
float: left;
}
#left li{
list-style:hiragana;
font-size:14px;
}
#right li{
list-style:cjk-ideographic;
font-size: 14px;
}
5239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
