All geek questions in one place

Make canvas javascript rectangle clickable

I am creating a simple calculator. Here it is. I am almost done with the basic design, but am confused about how to make the buttons clickable? One trick might be to make a div for each button, but I think there should be an easy way. Please guide. thanks

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="400" style="border:2px solid ;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,80); ctx.lineTo(300,80); ctx.fillStyle="#333333"; ctx.fillRect(0,320,50,80); ctx.fillStyle="#333333"; ctx.fillRect(250,320,50,80); ctx.stroke(); </script> </body> </html>
0
source share
4 answers

You can “press” the elongated button on the canvas by listening to mouseclicks and then hittesting whether the click position is inside any of the borders of the calculator keys.

Here is the code that will return true if the Musical is inside the rectangle:

 function isPointInsideRect(pointX,pointY,rectX,rectY,rectWidth,rectHeight){ return (rectX <= pointX) && (rectX + rectWidth >= pointX) && (rectY <= pointY) && (rectY + rectHeight >= pointY); }

If your calculator buttons are round, here is the code that will displace the muscle inside the circle:

 function isPointInsideCircle(pointX,pointY,circleX,circleY,radius){ var dx=circleX-pointX; var dy=circleY-pointY; return ( dx*dx+dy*dy<=radius*radius ); }
+1
source

Perhaps it would be to use the actual image of the calculator, then you could use an HTML map to determine where the buttons are.

Updated: here is an example of a map / area used , similar to the SVG example given elsewhere on this page.

0
source

I would recommend using SVG if you want to snap to graphic elements. The canvas element does not allow binding, because its graphic objects are not considered part of the DOM. See here for a demonstration of binding to SVG elements.

0
source

Since it looks like it's pure graphics, one thing that I have done in the past is to just listen to where the mouse is clicked and check if Ive clicked inside the button. Its pretty tame; basically you make your own control structure of primitive buttons / buttons.

It will look something like this:

 // define some button objects (can also set the press handlers, etc) // this should actually be in a Button 'class' of some sort var buttonA = {x: 0, y: 320, width: 50, height: 80}; var buttonB = {x: 250, y: 320, width: 50, height: 80}; //insert some rendering code to draw the buttons based on the button objects above // and when the mouse has been pressed function mousePressed(inputEvent){ // loop in here to check which button has been pressed by going through the button objects and responding as needed } canvas.addEventListener("click", mousePressed, false);

I think he basically reinvents the wheel here, so Id checks to see if there are currently existing libraries / frameworks (I did it like an exercise).

0
source

Source: https://habr.com/ru/post/953918/

More articles:


All Articles