最近有个课程项目，关于数据结构基础与算法的，要求写点代码实现校园最短路径的算法。算法网上能找到一大堆，但是要求以地图形式展示，这个一开始觉得还真有点难。本想通过调用百度地图api来实现显示这一模块，于是就去看了下，在百度地图上，上海大学太小了，找不足50各点。最后还是想到了前断时间张大神做了一个基于H5 canvas的实时画布，于是想尝试以下，发现还不错。
实现的方案是：采用java做后台，H5的Canvar作为结果展示部分。总体架构为：springMvc+hibernate+html5+jquery。
- springmvc：一种开源框架，我主要用它来实现我的业务逻辑以及数据的传递交互。
- hibernate：我用他来操作我的mysql数据库，实现对点和线的管理。
- html5：前台部分，当然是显示我的结果以及一些操作。
- jquery：用来一些简单的数据交互。
首先来看一下H5的画布
上图就是用canvar画出来的
看一下具体的代码;
function draw(id){//初始化函数
var canvers=document.getElementById('mycanver');
if(canvers == null){
return false;
}
var cxt=canvers.getContext('2d');
canvers.addEventListener("click", function (evt) { canversClick(canvers,evt,cxt)}, false);//添加点击事件
drawPoint(cxt,200,100,'上海大学北门');
drawPoint(cxt,450,160,'上海大学图书馆');
drawPoint(cxt,100,180,'上大南区');
drawPoint(cxt,300,30,'上大新世纪');
dramLine(200,100,450,160,cxt);
}
function drawPoint(cxt,x,y,text){//描点函数
cxt.beginPath();
cxt.arc(x,y,10,0,360,false);
cxt.fillStyle="cornflowerblue";//填充颜色,默认是黑色
cxt.fill();//画实心圆
cxt.closePath();
cxt.font = '14px';
cxt.textAlign = 'center';
cxt.textBaseline = 'top';
cxt.strokeStyle = 'black';
cxt.strokeText(text, x, y+15);
}
function dramLine(fromX,fromY,toX,toY,cxt,color){//连线函数
cxt.save();
if(color==null){
cxt.strokeStyle="black";
}
else {
cxt.strokeStyle = color;
}
cxt.translate(0.5,0.5);
cxt.lineWidth = 1;
cxt.beginPath();
cxt.moveTo(fromX, fromY);
cxt.lineTo(toX,toY);
cxt.stroke();
cxt.restore();
}
以上是画图的主要脚本函数。前台很简单，一个index.html
<canvas id="mycanver" width="1000px" height="600px"></canvas>
然后加上这些脚本就可以很快的画出上面的图形。今天就到这，明天继续更新。访问测试地址http://liuxin.lxliu.cn/sj这个也是我目前实现的功能
前台测试代码：缺两个文件，一个jquery，一个bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.1.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body onload="draw('mycanver')">
<canvas id="mycanver" width="1000px" height="600px"></canvas>
<div class="container">
<div class="col-sm-3">
<input type="radio" name="mode" checked="checked" value="0"/>浏览模式&nbsp;
<input type="radio" name="mode" value="1"/>添加标注模式&nbsp;
<input type="radio" name="mode" value="2"/>连线模式&nbsp;
</div>
<div class="col-sm-4">
<div>起始点：<span id="startPoint" style="width: 80px;display: inline-block;"></span><input type="radio" name="pointState" checked="checked" value="0"/>起始点&nbsp;</div>
<div>终止点：<span id="endPoint" style="width: 80px;display: inline-block;"></span><input type="radio" name="pointState" value="1"/>结束点&nbsp;</div>
</div>
<div class="col-sm-2"><button class="btn btn-default dramLine">连线</button></div>
<div class="col-sm-3"><button class="zoom" onclick="zoom_click()">缩放</button></div>
</div>
<script>
jQuery(document).on('click', ".addpoint", function() {
var data={
pointInput:$("#pointInput").val(),
pointNum:$("#pointNum").val(),
pointName:$("#pointName").val()
}
jQuery.ajax({
type: 'POST',
url: "addPoint",
data:data,
dataType: 'json',
success: function(json) {
if(json.status==0){
location.reload();
}
else {
$.toaster({ title : 'warning', priority : 'warning', message : json.result });
}
}
});
});
jQuery(document).on('click', ".deletePoint", function() {
var data={
id:$(this).attr("data-id")
}
jQuery.ajax({
type: 'POST',
url: "deletePoint",
data:data,
dataType: 'json',
success: function(json) {
if(json.status==0){
location.reload();
}
else {
$.toaster({ title : 'warning', priority : 'warning', message : json.result });
}
}
});
});
jQuery(document).on('click', ".addLine", function() {
var data={
fromPoint:$("#lineFrom").val(),
toPoint:$("#lineTo").val(),
lenth:$("#lenth").val(),
ableBike:$("#ableBike").val()
}
jQuery.ajax({
type: 'POST',
url: "addLine",
data:data,
dataType: 'json',
success: function(json) {
if(json.status==0){
location.reload()
}
else{
$.toaster({ title : 'warning', priority : 'warning', message : json.result });
}
}
});
});
jQuery(document).on('click', ".deleteLine", function() {
var data={
id:$(this).attr("data-id")
}
jQuery.ajax({
type: 'POST',
url: "deleteLine",
data:data,
dataType: 'json',
success: function(json) {
if(json.status==0){
location.reload();
}
else {
$.toaster({ title : 'warning', priority : 'warning', message : json.result });
}
}
});
});
</script>
</body>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于