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

Question

I have a rectangle in the html canvas, for which I need a drop down alert by clicking on it, having the details of the name in the box. How can I achieve this using Javascript?

My html is:

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

How can I have an event on the inner rectangle to display an alert with name as "ESPS"? Can anyone suggest me a code to achieve this?

Answer 1

The canvas element itself can trigger mouse events, but rectangles drawn on the canvas cannot. Any drawing on a canvas is just a set of un-remembered pixels.

But you can still accomplish click-testing a drawn rectangle.

First save the rectangle's definition in a javascript object:

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

Then listen for mousedown events on the canvas and test if the mouse is inside the rectangle's definition:

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

}

Here's example code and a Demo:

 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> 

Answer 2

Canvas is just an image canvas, it does not detect any mouse events / coordinates, it's just pixels. So unlike HTML+JavaScript, to implement what you're asking requires a lot of code in Canvas because you have to manually program every step.

A library like http://www.zebkit.com/ could maybe help.

Or you could switch to HTML or SVG, which don't have this problem, where you can just add an onclick handler to an element and then display some other element, without having to draw pixels manually.