单击矩形时，如何在 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，它不检测任何鼠标事件/坐标，它只是像素。因此，与 HTML+JavaScript 不同，要实现您的要求，需要在 Canvas 中编写大量代码，因为您必须手动对每个步骤进行编程。

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

或者你可以切换到 HTML 或 SVG，它们没有这个问题，你可以只向一个元素添加一个 onclick 处理程序，然后显示一些其他元素，而无需手动绘制像素.

Answer 2

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>

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

How to get a dropdown alert at the rectangle box in html canvas on clicking on the rectangle?

html

javascript

jquery

canvas