jsp 怎麼實現在一個圖片上勾勒出軌跡？
阿新 • • 發佈：2018-11-16
這個是一張圖片，上面是井下位置資訊（圖紙），我想在相應的位置如，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)
}
所有的點的座標都是藉助於螢幕取點工具完成的；