javascript - 如何在单击矩形时在 html Canvas 中的矩形框中获取下拉警报？

Question

我在 html Canvas 中有一个矩形，我需要通过单击它来显示下拉警报，并在框中包含名称的详细信息。我如何使用 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>

如何在内部矩形上发生事件来显示名称为“ESPS”的警报？谁能建议我一个代码来实现这一目标？

Answer 1

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

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

首先将矩形的定义保存在 JavaScript 对象中:

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

然后监听 Canvas 上的 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");
  }

}

这里是示例代码和演示:

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");
  }

}

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

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