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

我在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>

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

最佳答案

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

}

这是示例代码和演示：

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>

关于javascript - 单击矩形时，如何在html Canvas 的矩形框中获得下拉警报？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29276056/