极客观点
项目管理
HarmonyOS
1.我想在数据处，设置鼠标的浮动事件，显示附近的浮动框，并且在框里显示详细信息
代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>燃烧系统图</title>
</head>
<body>
<canvas id="myCanvas" width="1600" height="800" style="margin-top: -60px;">
</canvas>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var context = document.getElementById('myCanvas').getContext('2d');
context.beginPath();
var x = 300,
y = 200,
x1 = 1000,
y1 = 200,
intervalX = 300,
intervalY = 30;
var tphitstr = "一次风速前上/一次风温前上1,一次风速前上/一次风温前上2,一次风速前上/一次风温前上3,一次风速前上/一次风温前上4,一次风速前中/一次风温前中1,一次风速前中/一次风温前中2,一次风速前中/一次风温前中3,一次风速前中/一次风温前中4,一次风速前下/一次风温前下1,一次风速前下/一次风温前下2,一次风速前下/一次风温前下3,一次风速前下/一次风温前下4,一次风速后上/一次风温后上1,一次风速后上/一次风温后上2,一次风速后上/一次风温后上3,一次风速后上/一次风温后上4,一次风速后上/一次风温后中1,一次风速后中/一次风温后中2,一次风速后中/一次风温后中3,一次风速后中/一次风温后中4,一次风速后下/一次风温后下1,一次风速后下/一次风温后下2,一次风速后下/一次风温后下3,一次风速后下/一次风温后下4";
var tphitarr = tphitstr.split(",");
for(var k=1;k<4;k++){
//循环的是左侧的线条
for(var i = 0;i<10;i+=5){
context.moveTo(x,k*y+i);
context.lineTo(x+intervalX,k*y+i);
context.font = '16px Palatino';
context.moveTo(x,k*y+intervalY+i);
context.lineTo(x+intervalX,k*y+intervalY+i);
context.moveTo(x,k*y+intervalY*2+i);
context.lineTo(x+intervalX,k*y+intervalY*2+i);
context.moveTo(x,k*y+intervalY*3+i);
context.lineTo(x+intervalX,k*y+intervalY*3+i);
}
//循环的是右侧的线条
for(var i = 0;i<10;i+=5){
context.moveTo(x1,k*y1+i);
context.lineTo(x1+intervalX,k*y1+i);
context.moveTo(x1,k*y1+intervalY+i);
context.lineTo(x1+intervalX,k*y1+intervalY+i);
context.moveTo(x1,k*y1+intervalY*2+i);
context.lineTo(x1+intervalX,k*y1+intervalY*2+i);
context.moveTo(x1,k*y1+intervalY*3+i);
context.lineTo(x1+intervalX,k*y1+intervalY*3+i);
}
context.font = '32px Palatino';
//显示的是大字
switch(k){
case 1: context.fillText('上层',x+intervalX,1*y-40);
case 2: context.fillText('中层',x+intervalX,2*y-40);
default: context.fillText('下层',x+intervalX,3*y-40);
}
//画的是3个正方形
context.rect(x+intervalX,k*y-26,400,150);
context.stroke();
context.stroke();
}
var xmlhttp,xmlDoc;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Data/jzyxsj.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var itemData=xmlDoc.getElementsByTagName("item");
var var1,var2;
var val1Array=new Array();
var val2Array=new Array();
for (i=0;i<itemData.length;i++)
{
val1=itemData[i].getElementsByTagName("val1")[0].childNodes[0];
val2=itemData[i].getElementsByTagName("val2")[0].childNodes[0];
if(!val2){
val2Array[i]="";
val1Array.push(val1.nodeValue);
continue;
}
if(!val1){
val1Array[i]="_";
val2Array.push(val2.nodeValue);
continue;
}
val1Array.push(val1.nodeValue);
val2Array.push(val2.nodeValue);
}
for(var k=0;k<3;k++){
context.font = '16px Palatino';
//左边的数据
switch(k){
case 0:m(0);
break;
case 1:m(4);
break;
case 2:m(8);
break;
}
}
function m(value){
for(var j=value,l=0;j<value+4;j++,l++){
//左边的数据
console.log(context.measureText(val1Array[j]).width);
context.fillText(val1Array[j]+'|'+val2Array[j],x,(k+1)*y+l*30-5);
context.fillText(val1Array[j]+'|'+val2Array[j],x,(k+1)*y+intervalY+l*30-35);
context.fillText(val1Array[j]+'|'+val2Array[j],x,(k+1)*y+intervalY+l*30-35);
//左边的区域
/*var theRectZ = context.rect(x-20, (k+1)*y+l*30-25, 200, 23);
context.stroke();*/
//右边的数据
context.fillText(val1Array[j+12]+'|'+val2Array[j+8],x+2*intervalX+300,(k+1)*y+l*30-5);
context.fillText(val1Array[j+12]+'|'+val2Array[j+8],x+2*intervalX+300,(k+1)*y+intervalY+l*30-35);
context.fillText(val1Array[j+12]+'|'+val2Array[j+8],x+2*intervalX+300,(k+1)*y+intervalY+l*30-35);
//右边的区域
/*var theRectY = context.rect(x+2*intervalX+300-20, (k+1)*y+l*30-25, 200, 23);
context.stroke();*/
}
}
var cas = document.querySelector("#myCanvas");
var ctx = cas.getContext('2d');
cas.onclick = function(e){
if(context.isPointInPath(e.offsetX,e.offsetY)){
alert('老大！别点我');
}
}
</script>
</html>