Question

我在html画布中有一个矩形，我需要通过单击它来获取下拉警告，并在框中显示名称的详细信息。我怎样才能使用Javascript实现这一目标？

我的HTML是：

<script>
$(function loadSQLRecords(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.lineWidth = "1";
ctx.strokeStyle = "black";
ctx.rect(5, 5, 100, 100);  
ctx.stroke();
ctx.beginPath();
ctx.font = "10px Arial";
ctx.fillStyle = "black";
ctx.fillText("V10165",65,20);
ctx.beginPath();
ctx.lineWidth = "1";
ctx.strokeStyle = "black";
ctx.rect(15, 40, 75, 20);
ctx.fillStyle = "lightgreen";
ctx.fillRect(15,40,75,20);
ctx.font = "10px Arial";
ctx.fillStyle = "black";
ctx.fillText("ESPS",30,55);
ctx.stroke();
ctx.beginPath();
ctx.font = "10px Arial";
ctx.fillStyle = "black";
ctx.fillText("V10166",65,95);
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<div data-role="header">  

</div>  
<div data-role="content" style="padding: 15px" onload="loadSQLRecords();">

   <canvas id="myCanvas" width="1100" height="550" style="border:1px solid #d3d3d3;">
   </canvas>

</div>

如何在内部矩形上显示一个事件，以显示名称为＆＃34的警报; ESPS＆＃34;？任何人都可以建议我一个代码来实现这个目标吗？

Answer 1

canvas元素本身可以触发鼠标事件，但画布上绘制的矩形不能。画布上的任何绘图只是一组未记住的像素。

但您仍然可以完成对绘制矩形的点击测试。

首先将矩形的定义保存在javascript对象中：

var box1={
    x:15,y:40,
    w:75,h:20,
    right:15+40,
    bottom:75+20
}

然后在画布上侦听mousedown事件并测试鼠标是否在矩形的定义中：

// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // test if the mouse is inside box1
  if(mx>=box1.x && mx<=box1.right && my>=box1.y && my<=box1.bottom){
      alert("ESPS");
  }

}

以下是示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var box1={
  x:15,y:40,
  w:75,h:20,
  right:15+40,
  bottom:75+20
}

ctx.lineWidth = "1";
ctx.strokeStyle = "black";
ctx.strokeRect(5, 5, 100, 100);  

ctx.fillStyle = "lightgreen";
ctx.fillRect(box1.x,box1.y,box1.w,box1.h);
ctx.strokeRect(box1.x,box1.y,box1.w,box1.h);

ctx.font = "10px Arial";
ctx.fillStyle = "black";
ctx.fillText("V10165",65,20);
ctx.fillText("ESPS",30,55);
ctx.fillText("V10166",65,95);

// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // test if the mouse is inside box1
  if(mx>=box1.x && mx<=box1.right && my>=box1.y && my<=box1.bottom){
    alert("ESPS");
  }

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

Answer 2

Canvas只是一个图像画布，它不会检测任何鼠标事件/坐标，它只是像素。因此，与HTML + JavaScript不同，实现您所要求的内容需要Canvas中的大量代码，因为您必须手动编程每一步。

像http://www.zebkit.com/这样的图书馆可能有所帮助。

或者您可以切换到没有此问题的HTML或SVG，您只需在元素中添加onclick处理程序，然后显示其他元素，而无需手动绘制像素。

如何在单击矩形时在html画布的矩形框中获取下拉警报？

2 个答案: