使JavaScript畫布矩形可點擊
[英]Make a javascript canvas rectangle clickable
問題描述
我正在創建一個簡單的計算器。 來了 基本設計幾乎完成了，但是我對如何使按鈕可單擊感到困惑？ 一個技巧可能是為每個按鈕創建一個div，但我認為必須有一種簡單的方法。 請指導。 謝謝
<!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>
4 個解決方案
解決方案1
1 2013-05-09 05:30:04
您可以通過偵聽鼠標單擊，然后點擊測試位置是否在計算器鍵的任何邊界內，來“按下”畫布上的繪制鍵。
如果鼠標單擊位於矩形內，則以下代碼將返回true：
function isPointInsideRect(pointX,pointY,rectX,rectY,rectWidth,rectHeight){
return (rectX <= pointX) && (rectX + rectWidth >= pointX) &&
(rectY <= pointY) && (rectY + rectHeight >= pointY);
}
如果您的計算器按鈕是圓形的，則以下代碼將在一個圓圈內擊中鼠標單擊：
function isPointInsideCircle(pointX,pointY,circleX,circleY,radius){
var dx=circleX-pointX;
var dy=circleY-pointY;
return ( dx*dx+dy*dy<=radius*radius );
}
解決方案2
0 2013-05-08 23:11:07
一種可能是使用計算器的實際圖像，然后可以使用HTML映射定義按鈕的位置。
更新： 這是一個正在使用的地圖/區域的示例 ，類似於此頁其他地方給出的SVG示例。
解決方案3
0 2013-05-08 23:39:05
如果要綁定到圖形元素，我建議使用SVG。 canvas元素不允許綁定，因為其圖形不被視為DOM的一部分。 有關綁定到SVG元素的演示，請參見此處 。
解決方案4
0 2013-05-09 00:01:59
由於這看起來都是純圖形，因此我過去所做的一件事就是只聽鼠標按下的位置，然后檢查是否在按鈕內單擊。 這很手工； 基本上，您將制作自己的按鈕/按鈕基本處理結構。
它看起來像：
// 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);
我認為這基本上是在重新發明輪子，所以我先檢查是否有現有的庫/框架（我以此方式作為學習練習）。
如何使這個畫布矩形可點擊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.