Сделать javascript canvas прямоугольник clickable

Я создаю простой калькулятор. Here есть. Я почти закончил с базовым дизайном, но я смущен тем, как сделать кнопки доступными для кликов? Один трюк может состоять в том, чтобы сделать div для каждой кнопки, но я думаю, что должен быть простой способ. Пожалуйста, направляйте. БлагодаряСделать javascript canvas прямоугольник clickable

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

источник

2013-05-08 Fahad Uddin

http://stackoverflow.com/about – Xotic750

Возможность будет использовать фактическое изображение калькулятора, то вы можете использовать HTML map, чтобы определить, где кнопка.

Обновлено: here is an example of map/area in use, похожее на пример SVG, приведенный в другом месте на этой странице.

источник

2013-05-08 23:11:07 Xotic750

Да, я имел это в виду, но это было бы плохой практикой программирования, поскольку время загрузки уменьшилось бы. –

Я не вижу причин, почему этот метод будет классифицирован как плохая практика программирования. И что вы имеете в виду, «время загрузки уменьшится»? – Xotic750

Это звучит довольно хаки, как зависание divs вокруг страницы. Для этого требуется, чтобы все было расположено так, чтобы повторная калибровка не нарушала макет. Однако, если вы должны использовать холст для рисования калькулятора, он будет работать. – Jlange

Я бы рекомендовал использовать SVG, если вы хотите привязываться к графическим элементам. Элемент canvas не позволяет привязывать, поскольку его графические объекты не считаются частью DOM. См. here для демонстрации привязки к элементам SVG.

источник

2013-05-08 23:39:05 Jlange

Поскольку это выглядит так, как будто это чистая графика, одна вещь, которую я делал в прошлом, - это просто слушать, где мышь нажата, и проверить, не щелкнул ли я внутри кнопки. Это довольно ручная работа; в основном вы создадите собственную структуру управления примитивами кнопок/кнопок.

Это будет выглядеть примерно так:

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

Я думаю, что это в основном изобретать колесо здесь, так что я бы проверить, есть ли существующие библиотеки/рамки первых (я сделал это таким образом, как учебное упражнение).

источник

2013-05-09 00:01:59 mitim

Вы можете «нажимать» нарисованную кнопку на холсте, слушая mouseclicks, а затем hittesting, находится ли позиция щелчка внутри любой из границ ключа калькулятора.

Вот код, который возвращает истину, если MouseClick находится внутри прямоугольника:

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

источник

2013-05-09 05:30:04 markE

Нет! Никогда не дайте мне код. Код может работать очень хорошо, но это похоже на стероиды. –

Chuckle - тогда нет кода для вас! – markE

Сделать javascript canvas прямоугольник clickable

ответ

Смежные вопросы