jquery 画线绑定元素关系（项目中为客户之间的关系）

最新推荐文章于 2023-04-08 21:18:37 发布

原创最新推荐文章于 2023-04-08 21:18:37 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 同时被 2 个专栏收录

161 篇文章

订阅专栏

HTML5

6 篇文章

订阅专栏

只是初步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>

/**
 * @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;
}

tips:css中有诀窍，自己研究吧