0
点赞
收藏
分享

微信扫一扫

html5绘图

html5绘图

这是我在绘图过程中遇到的问题,求助高手帮忙啊。。。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="<%=basePath%>js/my.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//var ll = "<%=request.getParameter("choiceFileName")%>";
//var urll = "<%=basePath%>parseXmlAction.action?choiceFileName="+ll;
//alert(urll);
var transLength = $(".trans").length;
var arcLength = $(".arc").length;
var placeLength = $(".place").length;
var xP = new Array(placeLength);
var yP = new Array(placeLength);
var wP = new Array(placeLength);
var hP = new Array(placeLength);

var xT = new Array(transLength);
var yT = new Array(transLength);
var wT = new Array(transLength);
var hT = new Array(transLength);
for(var i=0; i<placeLength; i++){
xP[i] = $(".place:eq("+i+")").find(".x").text();
yP[i] = $(".place:eq("+i+")").find(".y").text();
wP[i] = $(".place:eq("+i+")").find(".w").text();
hP[i] = $(".place:eq("+i+")").find(".h").text();
}
for(var i=0; i<transLength; i++){
xT[i] = $(".place:eq("+i+")").find(".x").text();
yT[i] = $(".place:eq("+i+")").find(".y").text();
wT[i] = $(".place:eq("+i+")").find(".w").text();
hT[i] = $(".place:eq("+i+")").find(".h").text();
}

//第一步,获得所有的元素个数

$("#showModel").click(function(){
DrawTrans(cxt,0,0,50,50);
//DrawPlace(cxt,200.0,200.0,60.0,40.0);
for(var j=0; j<placeLength; j++){
//alert(xP[j]+" "+yP[j]+" "+wP[j]+" "+hP[j]);
DrawPlace(cxt,xP[j],yP[j],wP[j],hP[j]);
}

for(var i=0; i<transLength; i++){

DrawTrans(cxt,xT[i],yT[i],wT[i],hT[i]);
}

//画箭头
var a1=new window.mapleque.arrow();
a1.set({x:350,y:300},{x:200,y:200});
a1.paint(cxt);

});


});
</script>
</head>
<body>
<input type="button" id="showModel" value="生成模型"/>
<br/>
<!--
<table>
<tr>
<td>
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</td>
<td>
<canvas id="newCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</td>
</tr>
</table>
-->
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<hr/>
<table id="table"></table>
<div​ id="div" >
<s:iterator value="hashMap.keySet()" id="message"​ status="st">

<s:iterator value="hashMap.get(#message)" status="second">
<ul class="<s:property value="#message"/>"> <s:property value="#message"/>
<li class="id"><s:property value="id"/></li>
<li class="text"><s:property value="text"/></li>
<li class="x"><s:property value="x"/></li>
<li class="y"><s:property value="y"/></li>
<li class="w"><s:property value="w"/></li>
<li class="h"><s:property value="h"/></li>
<li class="dataType"><s:property value="dataType"/></li>
<li class="placeId"><s:property value="placeId"/></li>
<li class="transId"><s:property value="transId"/></li>
<li class="type"><s:property value="type"/></li>
<li class="initmark"><s:property value="initmark"/></li>
<li class="transNextId"><s:property value="transNextId"/></li>
<li class="placeNextId"><s:property value="placeNextId"/></li>
</ul>
</s:iterator>

</s:iterator>
</div>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

function DrawTrans(cxt,x,y,a,b){
//var cT=document.getElementById("myCanvas");
//var cxtT=cT.getContext("2d");
cxt.save();
cxt.beginPath();
cxt.strokeStyle = "#0000FF";
cxt.strokeRect(x,y,a,b);
cxt.restore();
}
function DrawPlace(context, x, y, a, b)
{
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max,表示度数的增加
//这样可以使得每次循环所绘制的路径(弧线)接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.strokeStyle = "#0000FF";
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step)
{
//参数方程为x = a * cos(i), y = b * sin(i),
//参数为i,表示度数(弧度)
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
//context.closePath();
context.stroke();
}
function DrawArc(cont, ax,ay,bx,by){

}

//DrawPlace(40, 40);
//DrawTrans(30,80);

</script>



</body>
</html>


画图显示的时候就是不对,直接调用画图函数的时候,是对的,但是加到for循环中就出现绘制偏差,不知道怎么回事啊。。


下面是页面源码:

<!DOCTYPE html>
<html>
<head>
<base href="http://localhost:8080/parsecpn/">

<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="http://localhost:8080/parsecpn/js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://localhost:8080/parsecpn/js/my.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//var ll = "3.cpn";
//var urll = "http://localhost:8080/parsecpn/parseXmlAction.action?choiceFileName="+ll;
//alert(urll);
var transLength = $(".trans").length;
var arcLength = $(".arc").length;
var placeLength = $(".place").length;
var xP = new Array(placeLength);
var yP = new Array(placeLength);
var wP = new Array(placeLength);
var hP = new Array(placeLength);

var xT = new Array(transLength);
var yT = new Array(transLength);
var wT = new Array(transLength);
var hT = new Array(transLength);
for(var i=0; i<placeLength; i++){
xP[i] = $(".place:eq("+i+")").find(".x").text();
yP[i] = $(".place:eq("+i+")").find(".y").text();
wP[i] = $(".place:eq("+i+")").find(".w").text();
hP[i] = $(".place:eq("+i+")").find(".h").text();
}
for(var i=0; i<transLength; i++){
xT[i] = $(".place:eq("+i+")").find(".x").text();
yT[i] = $(".place:eq("+i+")").find(".y").text();
wT[i] = $(".place:eq("+i+")").find(".w").text();
hT[i] = $(".place:eq("+i+")").find(".h").text();
}

//第一步,获得所有的元素个数

$("#showModel").click(function(){
DrawTrans(cxt,0,0,50,50);
//DrawPlace(cxt,200.0,200.0,60.0,40.0);
for(var j=0; j<placeLength; j++){
//alert(xP[j]+" "+yP[j]+" "+wP[j]+" "+hP[j]);
DrawPlace(cxt,xP[j],yP[j],wP[j],hP[j]);
}

for(var i=0; i<transLength; i++){

DrawTrans(cxt,xT[i],yT[i],wT[i],hT[i]);
}
for(var i=0; i<transLength; i++){

DrawTrans(cxt,xT[i],yT[i],wT[i],hT[i]);
}
//画箭头
var a1=new window.mapleque.arrow();
a1.set({x:350,y:300},{x:200,y:200});
a1.paint(cxt);

});


});
</script>
</head>
<body>
<input type="button" id="showModel" value="生成模型"/>
<br/>
<!--
<table>
<tr>
<td>
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</td>
<td>
<canvas id="newCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</td>
</tr>
</table>
-->
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<hr/>
<table id="table"></table>
<div​ id="div" >



<ul class="trans"> trans
<li class="id">1419094240</li>
<li class="text">int</li>
<li class="x">326.0</li>
<li class="y">200.0</li>
<li class="w">60.0</li>
<li class="h">40.0</li>
<li class="dataType"></li>
<li class="placeId"></li>
<li class="transId"></li>
<li class="type"></li>
<li class="initmark"></li>
<li class="transNextId">0, 1419094300, 0, 0</li>
<li class="placeNextId"></li>
</ul>

<ul class="trans"> trans
<li class="id">1419094720</li>
<li class="text">c</li>
<li class="x">494.0</li>
<li class="y">301.0</li>
<li class="w">60.0</li>
<li class="h">40.0</li>
<li class="dataType"></li>
<li class="placeId"></li>
<li class="transId"></li>
<li class="type"></li>
<li class="initmark"></li>
<li class="transNextId">0, 0, 0, 1419094819</li>
<li class="placeNextId"></li>
</ul>





<ul class="arc"> arc
<li class="id">1419094280</li>
<li class="text"></li>
<li class="x"></li>
<li class="y"></li>
<li class="w"></li>
<li class="h"></li>
<li class="dataType">i</li>
<li class="placeId">1419094226</li>
<li class="transId">1419094240</li>
<li class="type"></li>
<li class="initmark"></li>
<li class="transNextId"></li>
<li class="placeNextId"></li>
</ul>

<ul class="arc"> arc
<li class="id">1419094300</li>
<li class="text"></li>
<li class="x"></li>
<li class="y"></li>
<li class="w"></li>
<li class="h"></li>
<li class="dataType">i</li>
<li class="placeId">1419094260</li>
<li class="transId">1419094240</li>
<li class="type"></li>
<li class="initmark"></li>
<li class="transNextId"></li>
<li class="placeNextId"></li>
</ul>

<ul class="arc"> arc
<li class="id">1419094735</li>
<li class="text"></li>
<li class="x"></li>
<li class="y"></li>
<li class="w"></li>
<li class="h"></li>
<li class="dataType">i</li>
<li class="placeId">1419094260</li>
<li class="transId">1419094720</li>
<li class="type"></li>
<li class="initmark"></li>
<li class="transNextId"></li>
<li class="placeNextId"></li>
</ul>

<ul class="arc"> arc
<li class="id">1419094819</li>
<li class="text"></li>
<li class="x"></li>
<li class="y"></li>
<li class="w"></li>
<li class="h"></li>
<li class="dataType">i</li>
<li class="placeId">1419094226</li>
<li class="transId">1419094720</li>
<li class="type"></li>
<li class="initmark"></li>
<li class="transNextId"></li>
<li class="placeNextId"></li>
</ul>





<ul class="place"> place
<li class="id">1419094226</li>
<li class="text">a</li>
<li class="x">200.0</li>
<li class="y">200.0</li>
<li class="w">60.0</li>
<li class="h">40.0</li>
<li class="dataType"></li>
<li class="placeId"></li>
<li class="transId"></li>
<li class="type">INT</li>
<li class="initmark"></li>
<li class="transNextId"></li>
<li class="placeNextId">1419094280, 0, 0, 0</li>
</ul>

<ul class="place"> place
<li class="id">1419094260</li>
<li class="text">b</li>
<li class="x">494.0</li>
<li class="y">200.0</li>
<li class="w">60.0</li>
<li class="h">40.0</li>
<li class="dataType"></li>
<li class="placeId"></li>
<li class="transId"></li>
<li class="type">INT</li>
<li class="initmark"></li>
<li class="transNextId"></li>
<li class="placeNextId">0, 0, 1419094735, 0</li>
</ul>



</div>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

function DrawTrans(cxt,x,y,a,b){
//var cT=document.getElementById("myCanvas");
//var cxtT=cT.getContext("2d");
cxt.save();
cxt.beginPath();
cxt.strokeStyle = "#0000FF";
cxt.strokeRect(x,y,a,b);
cxt.restore();
}
function DrawPlace(context, x, y, a, b)
{
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max,表示度数的增加
//这样可以使得每次循环所绘制的路径(弧线)接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.strokeStyle = "#0000FF";
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step)
{
//参数方程为x = a * cos(i), y = b * sin(i),
//参数为i,表示度数(弧度)
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
//context.closePath();
context.stroke();
}
function DrawArc(cont, ax,ay,bx,by){

}

//DrawPlace(40, 40);
//DrawTrans(30,80);

</script>



</body>
</html>


可以直接复制到jsp页面中直接使用那。

生成的图是这个样子,很明显两个矩形的框位置就不对!

html5绘图_3c







举报

相关推荐

0 条评论