jsp 怎么实现在一个图片上勾勒出轨迹？

这个是一张图片，上面是井下位置信息（图纸），我想在相应的位置如，1#竖井-130处，勾勒出轨迹，

处理办法：

硬件方法、

屏幕取点工具（知道1#竖井和-130米处的坐标，）

软件方法：

1、利用div的position: absolute的属性，把图纸层和需要绘制轨迹的图层重合，

2、把绘制轨迹的图层背景设为透明，就可以了；

3、f12工具调整两个div的位置，使得图纸层和需要绘制轨迹的图层重合

以下是图纸层

图纸层代码如下：

<div class="right">
<img src="picture/a.jpg" class="jpeg"/> 
</div>

勾勒层图纸如下：

<div class="right">
<img src="http://localhost:8080/BootStrap/dwg.jsp" class="iframe"/>
</div>

最终效果如下：

勾勒的轨迹和原本图纸上面的线条完全吻合；

分享代码：

role_position.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
  <head>
    <base href="<%=basePath%>">   
    <title>图形展示-轨迹定位</title>   
  </head>
<link rel="stylesheet" type="text/css" href="css/role_position.css">
  <body>
<jsp:include page="common.jsp"></jsp:include>
<div class="right">
<img src="picture/a.jpg" class="jpeg"/> 
</div>
<div class="right">
<img src="http://localhost:8080/BootStrap/dwg.jsp" class="iframe"/>
</div>
</div>
</div>
<!-- 分割线 -->
<div  class="container-fluid">
<h5 class="page-header"></h5>
<jsp:include page="canledar.jsp"></jsp:include>
</div>
<!-- 底部 -->
<jsp:include page="foot.jsp"></jsp:include>
  </body>
</html>

勾勒轨迹层：

dwg.jsp

<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="java.awt.*"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.io.*"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="com.sun.image.codec.jpeg.*"%>
<%@page import="cn.com.Special.*"%>
<%@ page contentType="image/png" import="cn.com.servlet.*"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<!-- 这个是自适应各种分辨率的屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/first_page.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<head>
<title>绘图的java界面</title>
</head>
<style>
body {
	background-color: rgba(244, 250, 253, 0.2);
}
</style>
<body>
	<div class="container-fluid">
		<%
			int width = 1280;
			int height = 1024;
			//创建一个宽500高500的背景不是透明色的图片缓冲区----目的就是保存图片在内存
			BufferedImage bi = new BufferedImage(width, height,
					BufferedImage.TYPE_INT_RGB);
			//几何图形类新建对象----绘制图片
			Graphics2D gh = bi.createGraphics(); // 创建Graphics2D对象
			// ----------  增加下面的代码使得背景透明  -----------------
			bi = gh.getDeviceConfiguration().createCompatibleImage(width,
					height, Transparency.TRANSLUCENT);
			gh.dispose();
			gh = bi.createGraphics();
			// ----------  背景透明代码结束  -----------------
			//绘制路径直线图示意图
			gh.setColor(Color.CYAN);
			Recursive.dwf(gh);
			gh.dispose();
			response.reset();
			ServletOutputStream sos = response.getOutputStream();
			if (sos != null) {
				ImageIO.write(bi, "png", sos);
				sos.close();
				out.clear();
				out = pageContext.pushBody();
				return;
			}
		%>
	</div>
</body>
</html>

勾勒轨迹层的线条代码：

Recursive.dwf(gh);

public static void dwf(Graphics g) {
		Graphics2D gh = (Graphics2D) g;
		gh.setStroke(new BasicStroke(1));
		gh.drawLine(71,96,72,281);//30#����
		gh.drawLine(145,86,148,275);//17#--22#
		gh.drawLine(72,281,337,281);//1����׶�--20#
	    gh.drawLine(148,275,189,281);//22#--20#--1
	    gh.drawLine(189,281,337,281);//22#--20#--2
	    gh.drawLine(337,281, 396, 282);//20#--12#
	    gh.drawLine(352,80, 420, 71);//28#--14#
	    gh.drawLine(420, 71, 441, 70);//14#--23#
	    gh.drawLine(441, 70, 509, 58);//23#--29#
	    gh.drawLine(148,275, 149,462);//22#--24#
	    gh.drawLine(149,462, 149,560);//24#--40#
	     gh.drawLine(149,462,622,463);//24#--27#
	    gh.drawLine(392, 282,441,326);//12#--13#
	    gh.drawLine(441,326,503,378);//13#--19#
	     gh.drawLine(503,378,602,463);//19#--27#
	     gh.drawLine(602,463,734,460);//27#--38(1)#
	     gh.drawLine(734,460,734,561);//38(1)#--38(2)#
	    gh.drawLine(337,281,507,286);//20#--21#
	    gh.drawLine(507,286,580,286);//21#--15#
	    gh.drawLine(441, 70, 443,547);//23#--n#
	    gh.drawLine(149,560, 656,564);//40#--31/34#
	    gh.drawLine(656,564,734,561);//31/34#--38#
	    gh.drawLine(736,561,695,575);//38#--33#
	    gh.drawLine(443,547, 444,596);//#n--#37
	    gh.drawLine(444,596,444,649);//#37---#16
	    gh.drawLine(444,596,567,591);//#37---#32(1)
	    gh.drawLine(567,591,739,620);//#32(1)---#32(2)
	    gh.drawLine(739,620,696,626);//#32(2)---#32(3)
	    gh.drawLine(690,626,690,678);//#32---#11
	    gh.drawLine(690,575,690,626);//#33---#32
	    gh.drawLine(444,649,549,642);//#16---#26/36
	    gh.drawLine(549,642,756,670);//##26/36---#11(1)
	    gh.drawLine(756,670,694,678);//#11(1)---#11(2)
	    gh.drawLine(443,546,577,544);//#n--#38(1)
	    gh.drawLine(577,544,734,561);//#38(1)--#38(2)
	}

所有的点的坐标都是借助于屏幕取点工具完成的；

jsp 怎么实现在一个图片上勾勒出轨迹？

猜你喜欢